我正在制作這個計算器，我想在點擊時添加數字。我應該添加一個事件監聽器，還是有一個更簡單的方法？我想讓數字轉到 "當前 "類中。
<div class="calc-grid"> /span>
<div class="output">
<div class="prev"/span>> 123</div>
<div class="current"/span>> 456</div>
</div>/span>
<button class='span'/span>> AC</button>/span>
<button>/span>DEL</button>/span>
<button>/span>÷</button>/span>
<button>/span>1</button>/span>
<button>/span>2</button>
<button>/span>3</button>
<button>*</button>
<button>/span>4</button>/span>
<button>/span>5</button>
<button>/span>6</button>
<button>/span> </button>/span>
<button>/span>8</button>/span>
<button>/span>8</button>/span>
<button>/span>9</button>
<button>/span>-</button>
<button>.</button>。
<button>0</button>
<button class='span'/span>> =</button>
</div>/span>
uj5u.com熱心網友回復：
使用一個onClick事件來啟動一些JS代碼：
< button onClick="calculate(this)">1</button>
同時為你要修改的div指定一個id，以便簡單地查找：
< div class="current" id="current"> 456</div>
這里是一個例子，添加了你點擊的數字。
uj5u.com熱心網友回復：
嘗試考慮這個：
可能會幫助你。 。<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>
<style>
#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: blue;
}
.formstyle width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}
input: 20px; }
{
width: 20px;
background-color: white;
color: black;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
字體大小: 15px;
}
#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
</style>>
</head>
<body>
<div class= "formstyle">
<form name = "form1">
< input id = "calc"/span> type ="text" name ="answer"> <br> <br> br>
< input type = "button" value = "1" onclick = "form1. answer.value = '1'">
< input type = "button"/span> value = "2" onclick = "form1. answer.value = '2'">
< input type = "button"/span> value = "3" onclick = "form1. answer.value = '3'">
< input type = "button"/span> value = " " onclick = "form1. answer.value = ' ' ">
<br> <br>/span>
< input type = "button" value = "4" onclick = "form1. answer.value = '4'">
< input type = "button"/span> value = "5" onclick = "form1. answer.value = '5'">
< input type = "button"/span> value = "6" onclick = "form1. answer.value = '6'">
< input type = "button"/span> value = "-" onclick = "form1. answer.value = '-'">
<br> <br>/span>
< input type = "button" value = "7" onclick = "form1. answer.value = '7'">
< input type = "button"/span> value = "8" onclick = "form1. answer.value = '8'">
< input type = "button"/span> value = "9" onclick = "form1. answer.value = '9'">
< input type = "button"/span> value = "*"/span> onclick = "form1. answer.value = '*'">
<br> <br>/span>
< input type = "button" value = "/" onclick = "form1. answer.value = '/' ">
< input type = "button"/span> value = "0" onclick = "form1. answer.value = '0'">
<input type = "button" value = " 。 " onclick = "form1.answer.value = '.' ">
< input type = "button"/span> value = "=" onclick = "form1. answer.value = eval(form1.answer.value) ">
<br>
< input type = "button" value = "Clear All" onclick = "form1. answer.value = ' ' " id= "清除" >
<br>/span>
</form>/span>
</div>/span>
</body>
</html>/span> 轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320725.html
標籤：
下一篇：Html按鈕打樁