By GokiSoft.com| 19:17 25/10/2023|
Học JS

Bài tập - Ôn tập event trong javascript - Lập trình Javascript

Yêu cầu xây dựng trang web như sau

Khi người dùng click vào "Nhập Giá Trị A", "Nhập Giá Trị B" => Xuất hiện prompt để nhập dữ liệu tương ứng

Khi người dùng click vào In Kết Quả (Tổng của A, B)-> Hiển thị alert về kết quả tính toán được.

Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Triệu Văn Lăng [T2008A]
Triệu Văn Lăng

2020-10-22 08:54:31


#event(2018).html


<!DOCTYPE html>
<html>
<head>
	<title>Giai pt bac 1</title>
	<meta charset="utf-8">
	<style type="text/css">
		h3 {
			background-color: blue;
			color: white;
		}
		.row {
			background-color: green;
			color: white;
			border-radius: 15px;
		}
	</style>
</head>
<body>
	<h3>Giai phuong trinh bac 1</h3>
			
		<button onclick="click_1()" class="row">Nhập Giá Trị A</button>
		<button onclick="click_2()" class="row">Nhập Giá Trị B</button>
		<button onclick="click_3()" class="row">In Kết Quả</button>
    
   <script type="text/javascript">
		var a, b
		function click_1(){
			a = prompt('Nhập giá trị a') 
		}
		function click_2(){
			b = prompt('Nhập giá trị b')
		}
		function click_3(){
			num = a + b;
			alert("Tổng của a và b là "+num)
	}
</script>

</body>
</html>


Nguyên Phấn Đông [T2008A]
Nguyên Phấn Đông

2020-10-20 09:55:12

Đông uy tín


<!DOCTYPE html>
<html>
<head>
	<title>Phương trình bậc nhất</title>
	<meta charset="utf-8">
	<style type="text/css">
		.caption{
	background-color: #3db4bf;
	font-family: arial;
	font-size: 1em;
	color: white;
               }
         #table{
              width: 450px;
              height: 30px;'
              padding:30px 20px 30px 20px;
         }
         body{
         	margin-left: 20%;
         }
         .mausac{
         	background-color:#78d428;
	border: 2px ;
	padding-right:  1em; 
	padding-left:  1em; 
	margin-left: 10px;
	text-align: center;
	border-radius: 5px;
  	font-size: 15px;	
         }
	</style>
</head>
<body> 
  <table border="1" id="table">
  	<caption class="caption"> Giải Phương Trình Bậc 1</caption>
  	<tr>
  		<td>
  			<input type="button" name="valueA" value="Nhap A"  class="mausac" onclick="inputA()">
  			<input type="button" name="valueB" value="Nhap B"  class="mausac" onclick="inputB()">
  			<input type="button" name="valueA" value="In kết Quá"  class="mausac" onclick="outAB()">
  		</td>
  	</tr>
  </table>
  <script type="text/javascript">
  	function inputA() {
			a = parseInt(prompt("Nhập A = "));
		}
		function inputB() {
			b = parseInt(prompt("Nhập B = "));
		}
		function outAB() {			
			var c = a + b;
			alert("Tổng A+B: "+ c);
		}
  </script>
</body>
</html>


Nguyễn Anh Vũ [T2008A]
Nguyễn Anh Vũ

2020-10-20 09:25:26


#nhapab.html


<!DOCTYPE html>
<html>
<head>
	<title>Bai Tập 2</title>
	<meta charset="utf-8">
	<style type="text/css">
		.row{
			width: 100%;
			height: 20px;
			background-color: #FFFF99;
			color: black
		}
		.menu{
			width:100%;
			height:35px;
			background-color: #CCFFFF;
			padding-top: 10px;
			left: 10px;
			color: white
		}
	</style>
</head>
<body>
<div class="row">
		Giải Phương Trình Bậc 1
</div>
<div class="menu">
	<button onclick="NhapA()" style="background-color: #CCFF66" > Nhập A</button>
	<button onclick="NhapB()" style="background-color: #CCFF66"> Nhập B</button>
 	<button onclick="Ketqua()" style="background-color: #CCFF66"> Tổng a + b =</button>
</div>
<script type="text/javascript">
	var a,b;
	function NhapA(){
		a=parseInt(prompt('NhapA'))
	}
	function NhapB(){
		b=parseInt(prompt('NhapB'))
	}
	function Ketqua(){
		Tongabla = a + b;
		alert("Tongabla"+Tongabla); 
	}
</script>

</body>


nguyễn Sử [T2008A]
nguyễn Sử

2020-10-20 08:47:58


#ontapevent.html


<!DOCTYPE html>
<html>
<head>
	<title> ôn tập event</title>
	<meta charset="utf-8">
</head>
<body>
<div class="1">
	<table border="1">
		<tbody>
			<thead>
				<tr> 
					<th style="background-color: #2585cf; color: white;"> giải phương trình bậc 1 </th>
				</tr>
					<form>
						<button onclick="giátrịcủaA()" style="background-color: #22bd60; color: white;"> giá trị của A </button>
						<button onclick="giátrịcủaB()" style="background-color: #22bd60; color: white;"> giá trị của B </button>
						<button onclick="Kếtquả()" style="background-color: #22bd60; color: white;"> Kết quả </button>
					</form>
				</tr>
			</thead>
			<tbody id="giatriAlist">
		</tbody>
	</table>
</div>
<script type="text/javascript">
	var a
	function giatricủaA(){
		a=prompt('giá trị của A', )
	}
	var b
	function giatricủaB(){
		b=prompt('giá trị của B', )
	}
	var tổng
	function kếtquả (){	
		 tổng = a + b
		alert('kết quả' + tổng)

	}
</script>
</body>
</html>


Đức Sơn [T2008A]
Đức Sơn

2020-10-20 06:28:55


#js6.html


<!DOCTYPE html>
<html>
<head>
	<title>Js</title>
	<meta charset="utf-8">
	<style type="text/css">
     
     .pt-1{
     	display: inline-table;
     	background-color: #4164cc;
     }

	 #giatri-a{
	 	background-color: #33a156;
	 }
	 #giatri-b{
	 	background-color:  #33a156;
	 }
	 #ketqua-1{
	 	background-color:  #33a156;
	 }
	</style>
</head>
<body>
  <table border="1">
  	<thead>
  		<div class="pt-1">
  		<tr>
  			<th style="background-color: #4164cc">Giải Phương Trình Bậc 1</th>
  		</tr>
  	</div>
  <tr>
  	<form></form>
  	<input type="button" value="Nhập Giá Trị A" id="giatri-a" onclick="giatri_a()">
  	<input type="button" value="Nhập Giá Trị b" id="giatri-b" onclick="giatri_b()">
  	<input type="button" value="In Kết Quả" id="ketqua-1" onclick="ketqua()">
  </tr>
</thead>
</table>

 <script type="text/javascript">
 	function giatri_a() {
 		var a=prompt("Nhập giá trị a:")
 	}
 	function giatri_b(){
 		var b=prompt("Nhập giá trị b:")
 	}
 	
 	function ketqua(x, y) {
    	var hieu= a-b;
    	alert('ket qua' + hieu)
    }
 </script>
</body>
</html>


Nguyễn Tuấn Hùng [T2008A]
Nguyễn Tuấn Hùng

2020-10-19 09:59:05


#Tổng A B js.html


<!DOCTYPE html>
<html>
<head>
	<title>Tổng A B</title>
	<meta charset="utf-8">
	<style type="text/css">
		.row {
			display: flex;
			width: 100%;
			padding-bottom: 20px;
		}
		.col-lg-4 {
			float: left;
			width: 40%;
			text-align: right;
			padding-right: 20px;
		}
		.col-lg-8 {
			float: left;
			width: 60%;
			background-color: 
		}
	</style>
</head>
<body>
<table border="1">
	<thead>
		<tr>
		<th style="background-color: #007acc; color: white;">Giải phương trình bậc 1</th></tr>
			<tr>
				<th><form>
					<button style="background-color: #33cc33" onclick="NhapA()" id="NhapA">Nhap A</button>
					<button style="background-color: #33cc33" onclick="NhapB()" id="NhapB">Nhap B</button>
					<button style="background-color: #33cc33" onclick="KQ()" id="KQ">Ket qua</button>
				</form></th>
			</tr>
				
		
	</thead>
</table>	
<script type="text/javascript">
	var A = 0, B = 0
	function NhapA() {
		A = prompt('gia tri cua A')
	}
	function NhapB() {
		B = prompt('Gia tri cua B')
	}
	function KQ() {
		A = eval(A)
		B = eval(B)
		x = A+B 
		alert(x)
	}
</script>
</body>
</html>


vuong huu phu [T2008A]
vuong huu phu

2020-10-19 09:52:22



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<table border="1">
		<thead>
			<tr>
				<th style="background-color: #007acc; color: white;">Giai phương trình bậc 1</th>
			</tr>
			<tr><form>
			
				<th>
				<button onclick="giatri_a()" style="background-color: #33cc33; color: white;" >Giá trị của a</button>
				<button onclick="giatri_b()" style="background-color: #33cc33; color: white;" >Giá trị của b</button>
				<button onclick="kq()" style="background-color: #33cc33; color: white;" >kết qua</button>
			</th></form>
			</tr>
		</thead>
	</table>
<script type="text/javascript">
var a , b;
	function giatri_a(){
		 a =prompt("nhập giá trị của a");
	}
	function giatri_b(){
		 b =prompt("nhập giá trị của b");
	}
	function kq(){
		var tong = a + b;
		alert('ket qua'+tong)
	}
</script>	
</body>
</html>


Trần Thị Khánh Huyền [T2008A]
Trần Thị Khánh Huyền

2020-10-19 09:29:19


#2018.html


<!DOCTYPE html>
<html>
<head>
	<title>On Tap Event</title>
	<meta charset="utf-8">
</head>
<body>
<table border="1" cellspacing="3" cellpadding="3">
<thead>
			<tr>
				<th colspan="6">Giai Phuong Trinh Bac 1</th>
			</tr>
			<tr>
				<th><input type="button"  value="Nhap gia tri A"  onclick="addA()"></th>
				<th><input type="button"  value="Nhap gia tri B"  onclick="addB()"></th>
				<th><input type="button"  value="In Ket qua" onclick="ketQua()"></th>
			</tr>
		</thead>


<script type="text/javascript">
	function addA() {
			 A = parseFloat(prompt("Nhap A = "));
		}
		function addB() {
			 B = parseFloat(prompt("Nhap B = "));
		}
		function ketQua() {			
			var C = A + B;
			alert("Tong la: "+ C);
		}
</script>
</body>
</html>


Bùi Văn Mạnh [T2008A]
Bùi Văn Mạnh

2020-10-19 09:20:23


#baitap2.html


<!DOCTYPE html>
<html>
<head>
	<title>Bai Tập 2</title>
	<meta charset="utf-8">
	<style type="text/css">
		.row{
			width: 100%;
			height: 20px;
			background-color: #346beb;
		}
		.menu{
			width:100%;
			height:35px;
			background-color: #eef5eb;
			padding-top: 10px;
			left: 10px;
		}
	</style>
</head>
<body>
<div class="row">
		Giải Phương Trình Bậc 1
</div>
<div class="menu">
	<button onclick="NhapA()" style="background-color: #25e31b"> Nhập Giá Trị A</button>
	<button onclick="NhapB()" style="background-color: #25e31b"> Nhập Giá Trị B</button>
 	<button onclick="Ketqua()" style="background-color: #25e31b">Kết Quả</button>
</div>
<script type="text/javascript">
	var a,b;
	function NhapA(){
		a=parseInt(prompt('NhapA'))
	}
	function NhapB(){
		b=parseInt(prompt('NhapB'))
	}
	function Ketqua(){
		Ketqua=a+b;
		alert("ket qua"+Ketqua); 
	}
</script>

</body>
</html>


hainguyen [T2008A]
hainguyen

2020-10-19 09:02:51


#java.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#class{
			background-color: green;
			color: white;
			border: 1px solid;
			border-radius:5px ;
		}
	</style>
</head>
<body>
	<div>
	<button onclick="click3()" id="class">Nhập Giá Trị A</button>
	<button onclick="click1()" id="class">Nhâp Giá Trị B</button>
	<button onclick="click2()" id="class">In kết quả</button>
	</div>

	<script type="text/javascript">
	var a, b
	function click3(){
		a = prompt('Nhap a') 
	}
	function click1(){
		b = prompt('Nhap b')
	}
	function click2(){
		num = a + b;
		alert(num)
	}
</script>
</body>
</html>


Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó