By GokiSoft.com| 20:03 23/03/2021|
Học JQuery

Bài tập - Sử dụng bootstrap + jquery - Xử lý event - Lập trình Bootstrap/jQuery

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ả -> 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)

Võ Như Việt [C2010L]
Võ Như Việt

2021-03-24 17:12:59



<!DOCTYPE html>
<html>
<head>
	<title>Bài tập - Sử dụng bootstrap + jquery - Xử lý event - Lập trình Bootstrap/jQuery</title>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

</head>
<body>

		<div class="container">
			<div class="border bg-primary rounded text-light" style="padding: 10px; padding-bottom: 0px;">
				<p>Giải Phương Trình Bậc 1</p>
			</div>
			<div class="border rounded" style="padding: 15px;">
				<button class="btn btn-success" id="nhapA">Nhập Giá Trị A</button>
				<button class="btn btn-success" id="nhapB">Nhập Giá Trị B</button>
				<button class="btn btn-success" id="ketqua">In Kết Quả</button>
			</div>
		</div>

</body>
<script type="text/javascript">
	$(function(){
		$('#nhapA').click(function(){
				a = prompt("Nhap gia tri A = ")
				console.log(a)
				return false;
		})
	$('#nhapB').click(function(){
				b = prompt("Nhap gia tri B = ")
				console.log(b)
		return false;
		})
	$('#ketqua').click(function(){
				if(a==0){
					if(b==0){
						alert("Phương trình vô sô nghiệm");
					}
					else{
						alert("Phương trình vô nghiệm");
					}
				}
				else{
					x= -b/a;
					alert("Kết quả = "+ x); 
				}
				console.log(x)
		})
	})
</script>
</html>


Đào Mạnh Dũng [C2010L]
Đào Mạnh Dũng

2021-03-23 13:49:57


#PTB.html


<!DOCTYPE html>
<html>
<head>
	<title>Giải phương trinh</title>


	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

</head>
<body>


<div class="container" style="margin-top: 50px">
	
			<div>
				
				<ul class="list-group">
			    <li class="list-group-item active">giải phương trình bậc 1</li>
					    <li class="list-group-item">

					    	<div class="container">
					    		<button id="buttonA" type="button" class="btn btn-success" style="margin-right: 20px">nhập a</button>
					    	<button id="buttonB" type="button" class="btn btn-success" style="margin-right: 20px">nhập b</button>
					    	<button id="buttonS" type="button" class="btn btn-success" style="margin-right: 20px">in kết quả</button>
					    	</div>


					    </li>
			    
			  </ul>


			</div>

<script type="text/javascript">
	
			 
$(function(){

	$('#buttonA').click(function(){
		a = prompt("Please enter a",0);
	})
	$('#buttonB').click(function(){
		b = prompt("Please enter b",0);
	})
	$('#buttonS').click(function(){

			if(a==0){
				if(b==0){
					alert("kết quả là vô số nghiệm");

				} else {alert("kết quả là vô nghiệm");}
				
			} else{alert("kết quả là "+(-b/a));}


		
	})
	
})



</script>

</div>



</body>
</html>


Vũ Trung Kiên [C2009I]
Vũ Trung Kiên

2021-01-07 03:03:07


#PTB1.html


<!DOCTYPE html>
<html>
<head>
	<title>Giải phương trình bậc 1</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<style type="text/css">
		.Box
		{
			border: solid 1px #377bb5;
			border-radius: 10px;
			margin-top: 10px;
		}
		.BoxTop
		{
			background-color: #377bb5;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 10px 0 10px 20px;
			margin: 0 0 20px 0;
			color: white;
		}
		.BoxBet
		{
			margin: 20px 0 20px 20px;
		}
		button
		{
			background-color: #5fb760;
			border: none;
			color: white;
			outline: none !important;
			border-radius: 5px;
			padding: 7px 15px 7px 15px;
		}
		button:hover
		{
			background-color: #3eb43f;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="Box">
			<div class="BoxTop">
				Giải phương trình bậc 1
			</div>
			<div class="BoxBet">
				<button id="EnterA">Nhập Giá Trị A</button>
				<button id="EnterB">Nhập Giá Trị B</button>
				<button id="Show">In Kết Quả</button>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$('#EnterA').click(function () 
		{
			a = prompt("Nhập a");
		})
		$('#EnterB').click(function () 
		{
			b = prompt("Nhập b");
		})
		$('#Show').click(function()
		{
			if((a==0) && (b == 0))
			{
				alert('Phương trình có vô số nghiệm');
			} else if((a == 0) && (b != 0))
			{
				alert('Phương trình vô nghiệm');
			} else 
			{
				x = -b/a;
				alert('Phương trình ' + a + 'x + ' + b + ' = 0 có nghiệm x = ' + x);
			}
		})
	</script>
</body>
</html>


Hiếu Vũ [community,C2009I]
Hiếu Vũ

2021-01-06 17:45:39



<!DOCTYPE html>
<html>
  <head>
    <title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  </head>
  <body>
    <div class="container">
        <div class="card bg-primary text-white">
        <div class="card-header">
          <h4>Giải Phương Trình Bậc 1</h4>
        </div>
        <div class="card-body" style="background-color: white;">
          <button type="button" class="btn btn-primary" id="InputA">Nhập Giá Trị A</button>
          <button type="button" class="btn btn-primary" id="InputB">Nhập Giá Trị B</button>
          <button type="button" class="btn btn-primary" id="PrintResult">In Kết Quả</button> 
        </div>
      </div> 
    </div>
    <script>
      $('#InputA').click(function () {
        alert (a = prompt("Mời Bạn Nhập A"));
      })
      $('#InputB').click(function () {
        alert (b = prompt("Mời Bạn Nhập B"));
      })
      $('#PrintResult').click(function () {
        c = -(b)/a
        alert ("Phương Trình Có Nghiệm Là: " +c)
      })
    </script>
  </body>
</html>


nguyen hoang viet [community,C2009I]
nguyen hoang viet

2021-01-05 09:56:37



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
	<div class="container">
		<div class="card">
		<div class="card bg-primary text-white">
    		<div class="card-body">Giải Phương Trình Bậc 1</div>
		</div>
		<div class="card-body">
		<div style="display: flex;background-color: white; margin: 5px">
			<div class="card bg-success text-white" style="width: 130px;height: 40px;margin-left: 5px;">
	    		<div class="card-body" id="a" style="padding: 5px; padding-left: 13px">Nhập Giá Trị A</div>
	  		</div>
	  		<div class="card bg-success text-white" style="width: 130px;height: 40px;margin-left: 5px;">
	    		<div class="card-body" id="b" style="padding: 5px; padding-left: 13px">Nhập Giá Trị B</div>
	  		</div>
	  		<div class="card bg-success text-white" style="width: 100px;height: 40px;margin-left: 5px;">
	    		<div class="card-body" id="result" style="padding: 5px; padding-left: 13px">In Kết Quả</div>
	  		</div>
  		</div>
	</div>
	<script type="text/javascript">
		$('#a').click(function(){
			alert (a = prompt("Mời nhập A"));
			if (a == 0){
				alert('Mời bạn nhập A khác 0');
				alert (a = prompt("Mời nhập A"));
			}
		})
		$('#b').click(function(){
			alert (b = prompt("Mời nhập B"));
		})
		$('#result').click(function(){
			c = (-b) / a;
			document.write('x = ')
			document.write(c)
		})
	</script>
</body>
</html>


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

2020-11-14 18:12:15


#bt1 jquery.html


<!DOCTYPE html>
<html>
<head>
	<title>Giải Phương Trình Bậc 1</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial - scale=1.0">
	<style>
		.main{
			border: 1px solid blue;
			border-radius: 5px;
			width: 100%;
			height:80px;
			display: block; 
		}
		.top{
			background-color: blue;
			height: 30px;
			padding-left: 5px;
			padding-top: 5px;
			color: white;
		}
		ul{
			display: flex;
			list-style-type: none;
		}
		li{
			border: 1px solid #7ab369;
			background-color: #7ab369;
			border-radius: 5px;
			padding: 5px;
			margin-right: 10px;
			margin-top: -7px;
			color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class ="top">
			Giải Phương Trình Bậc 1
		</div>
		<div>
			<ul>
				<li id="InputA">Nhập giá trị A</li>
				<li id="InputB">Nhập giá trị B</li>
				<li id="Result">In Kết Quả</li>
			</ul>
		</div>
	</div>
<!-- jQuery library -->	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var A, B, x;
		$('#InputA').click(function(){
			 A=prompt("Nhập giá trị A:")
		})
		$('#InputB').click(function(){
			 B=prompt("Nhập giá trị B:")
		})
		$('#Result').click(function(){
			if (A==0) {
				if (B==0) {alert('PTVSN')}
					else(alert('PTVN'));
			}else{	
		
				C=-B/A;
				alert('Phương trình có nghiệm: '+C)}
				})
	</script>
</body>
</html>


Nguyễn Hữu Hiếu [T2008A]
Nguyễn Hữu Hiếu

2020-11-04 08:08:57



<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap/JQuery Tutorial</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
	<div style="width: 70%; border: blue;">
		<ul class="list-group">
			<li style="background-color: blue; color: white;">
				Giải phương trình bậc 1
			</li>
			<li class="list-group-item">
				<button class="btn-primary" id="a">Nhập giá trị A</button>
				<button class="btn-primary" id="b">Nhập giá trị B</button>
				<button class="btn-primary" id="kq">Kết quả</button>
			</li>
		</ul>
	</div>
		


	
	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		
		$(function() {
			
			//bat su kien
			$('#a').click(function() {
				a = prompt("Nhap a = ");
			})
			$('#b').click(function() {
				b = prompt("Nhap b = ");
			})
			$('#kq').click(function() {
				x = -b/a;
				alert(x);
			})

		})
		
	
	




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


Do Trung Duc [T2008A]
Do Trung Duc

2020-11-04 03:10:31



<!DOCTYPE html>
<html>
<head>
	<title>Giai phong trinh bac nhat</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
	<div style="width: 60%; margin: 0 auto">
		<div class="card">
		  <div class="card-header bg-primary">Giai Phuong Trinh Bac 1: ax+b=0</div>
		  <div class="card-body">
		 	<button type="button" class="btn btn-success" id="nhapA">Nhap gia tri a</button>
		 	<button type="button" class="btn btn-success" id="nhapB">NHap gia tri b</button>
			 <button type="button" class="btn btn-success" id="result">In ket qua</button>
		  </div>
	</div>



	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(function () {
			$('#nhapA').click(function(){
				a = prompt("nhap gia tri a")
			})

			$('#nhapB').click(function(){
				b = prompt('nhap gia tri b')
			})	

			$('#result').click(function(){
				result = -b/a;
				alert("Ket qua nghiem x =" + result)
			})


			
		})



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


Nguyễn đình quân [T2008A]
Nguyễn đình quân

2020-11-03 19:22:56



<!DOCTYPE html>
<html>
<head>
	<title>Giải Phương Trình Bậc 1</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial - scale=1.0">
	<style>
		.main{
			border: 1px solid blue;
			border-radius: 5px;
			width: 100%;
			height:80px;
			display: block; 
		}
		.top{
			background-color: blue;
			height: 30px;
			padding-left: 5px;
			padding-top: 5px;
			color: white;
		}
		ul{
			display: flex;
			list-style-type: none;
		}
		li{
			border: 1px solid #7ab369;
			background-color: #7ab369;
			border-radius: 5px;
			padding: 5px;
			margin-right: 10px;
			margin-top: -7px;
			color: white;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class ="top">
			Giải Phương Trình Bậc 1
		</div>
		<div>
			<ul>
				<li id="InputA">Nhập giá trị A</li>
				<li id="InputB">Nhập giá trị B</li>
				<li id="Result">In Kết Quả</li>
			</ul>
		</div>
	</div>
<!-- jQuery library -->	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var A, B, x;
		$('#InputA').click(function(){
			 A=prompt("Nhập giá trị A:")
		})
		$('#InputB').click(function(){
			 B=prompt("Nhập giá trị B:")
		})
		$('#Result').click(function(){
			if (A==0) {
				if (B==0) {alert('PTVSN')}
					else(alert('PTVN'));
			}else{	
		
				C=-B/A;
				alert('Phương trình có nghiệm: '+C)}
				})
	</script>
</body>
</html>


hainguyen [T2008A]
hainguyen

2020-11-03 12:40:37


#BT1.html


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<!-- FontAwesome -->
	<script src="https://kit.fontawesome.com/18bc5ffef0.js" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="card-header bg-primary" style="color: white">
				Giải phương trình bậc một
			</div>
			<div class="card-body">
				<button class="btn btn-success" id="input_a">Nhập giá trị A</button>
				<button class="btn btn-success" id="input_b">Nhập giá trị B</button>
				<button class="btn btn-success" id="output">In kết quả</button>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var a, b, c;
		$("#input_a").click(function() {
			a = prompt("input a: ")
		})
		$("#input_b").click(function() {
			b = prompt("input b: ")
		})
		$("#output").click(function() {
			c = -b/a;
			alert("kết quả: " + c)
		})
	</script>
</body>
</html>


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

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