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.

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

5

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

Đỗ Minh Quân

2020-10-19 08:59:55

#bài tap.html

<!DOCTYPE html>
<html>
<head>
	<title>bai 1</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			margin: 0px;
			padding: 0px;
		}
		.header{
			width: 100%;
			height: 80px;
			background-color: grey;
			padding-top: 40px
		}
		.menu{
			width: 100%;
			height: 50px;
			background-color: pink;
			padding-top: 20px
		}
		button{
			background-color: green
		}

	</style>
</head>
<body>
<div class="header">
   TINH TOAN PHEP TINH NAY !!!!!
</div>
<div class="menu">
	<button onclick='NhapA()'>Nhap A</button>
	<button onclick='NhapB()'>Nhap B</button>
	<button onclick='printf()'>Ket qua</button>
</div>
<script type="text/javascript">
    var a,b;

	function NhapA(){
	 
	  a=parseInt(prompt('Nhap A'))	
	}
	function NhapB(){
	  
	  b=parseInt(prompt('Nhap B'))	
	}
	function printf(){
        
		ketqua= a + b;
		alert("ket qua la "+ketqua);
	}
	
	
</script>
</body>
</html>

Nguyễn Tiến Đạt

2020-10-19 08:57:25

#tinhtong.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giải phương trình bậc 1</title>
    <style>
        .main{
            border: 1px solid #4970a3;
            border-radius: 5px;
            width: 500px;
            height: 80px;
            display: block;
        }
        .top{
            background-color: #4970a3;
            width: 99.1%;
            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 onclick="putA()">Nhập giá trị A</li>
                <li onclick="putB()">Nhập giá trị B</li>
                <li onclick="result()">In kết quả</li>
            </ul>
        </div>
    </div>
    <script>
        var count=0
        function putA() {
            a=prompt('Nhập A:')
            count++
        }
        function putB() {
            b=prompt('Nhập B:')
            count++
        }
        function result() {
            if(count!=2){
                alert('Nhập đầy đủ giá trị!!')
                return
            }
            count = 0
            a=eval(a);
            b=eval(b);
            r=a+b;
            alert('Tổng của A và B là '+r)
        }
    </script>
</body>
</html>

Đặng Trần Nhật Minh

2020-10-19 08:44:35

<!DOCTYPE html>
<html>
<head>
	<title>Giai Phuong Trinh Bac 1</title>
	<meta charset="utf-8">
	<style type="text/css">
		.button {
			margin-right: 20px;
			background-color: #32a842;
			color: white;
			border-radius: 12px;
		}
	</style>
</head>
<body>
	<div>
		<h3>Giai Phuong Trinh Bac Nhat: ax + b = 0</h3>
	</div>
	<br/>
	<div style="display: flex;">
		<input class="button" type="button" value="Nhap a: " onclick="input_a()">
		<input class="button" type="button" value="Nhap b: " onclick="input_b()">
		<input class="button" type="button" value="Tinh Ket Qua" onclick="solve()">
	</div>

	<script type="text/javascript">
		var a;
		var b;

		function input_a() {

			a = prompt("Input a: ");

		}

		function input_b() {

			b = prompt("Input b: ");

		}

		function solve() {

			if (a === 0) {
			
				if (b === 0) alert("The Equation Has Infinite Solution.\n");
				else alert("The Equation Has No Solution.\n");
			
			}
			else {
			
				if (b == 0) alert("The Equation Has Infinite Solution.\n");
				else {
				
					var x = -b / a;
					alert("The Equation Has 1 Solution x = " + x);
				
				}
			
			}

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

Trần Văn Lâm

2020-10-19 08:42:16

#event.html

<!DOCTYPE html>
<html>
<head>
	<title>JS event</title>
</head>
<body>
	<div>
		<button onclick="nhapA()" >Nhap A</button>
		<button onclick="nhapB()">Nhap B</button>
		<button onclick="printresult()">In Ket Qua</button>
	</div>
	<script type="text/javascript">
		var A = 0, B = 0;
		function nhapA(){
			A = prompt('nhap A')
		}
		function nhapB(){
			B = prompt('nhapB')
		}
		function printresult(){
			sum = A + B
			alert(sum)
		}
	</script>

</body>

Nguyễn Hữu Hiếu

2020-10-19 08:27:33

#2018.html

<!DOCTYPE html>
<html>
<head>
	<title>Short URL: https://gokisoft.com/2018</title>
</head>
<body>
	<input type="button" name="valueA" value="Nhap A" id="a" onclick="inputA()">
	<input type="button" name="valueB" value="Nhap B" id="b" onclick="inputB()">
	<input type="button" name="kq" value="Ket qua" id="ketQua" onclick="outKQ()">
	<script type="text/javascript">
		function inputA() {
			a = parseInt(prompt("Nhap a = "));
		}
		function inputB() {
			b = parseInt(prompt("Nhap b = "));
		}
		function outKQ() {			
			var c = a + b;
			alert("Tong a va b la: "+ c);
		}
	</script>
</body>
</html>