Simple Calculator in HTML and JavaScript with buttons
Question
I have the following HTML and JavaScript code for a simple calculator.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" defer></script>
</head>
<body>
<h1>Calculator</h1>
First value: <input name="number1" type="text" size=10 id='num1'/>
<fieldset>
<label for "+">+</label>
<input type="radio" id="+" value ="+" name=calculation/>
<br>
<label for "+">-</label>
<input type="radio" id="-" value ="-" name=calculation/>
<br>
<label for "+">x</label>
<input type="radio" id="x" value ="x" name=calculation/>
<br>
<label for "+">÷</label>
<input type="radio" id="div" value ="div" name=calculation/>
</fieldset>
Second value: <input name="number2" type="text" size=10 id='num2'/> <input type="submit" value="compute" onclick=""/>
<br>
Result: <input id='result' readonly ></td>
</body>
</html>
And the result looks like this:
However, I want to create something like this:
Then it looks like I have to change the width for the radio buttons and change the color for the buttons. And, how do I come up with the correct JavaScript code?
2 answers
solution1
0 2021-05-04 02:30:36
I have the following HTML and JavaScript code for a simple calculator.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" defer></script>
</head>
<body>
<h1>Calculator</h1>
First value: <input name="number1" type="text" size=10 id='num1'/>
<fieldset>
<label for "+">+</label>
<input type="radio" id="+" value ="+" name=calculation/>
<br>
<label for "+">-</label>
<input type="radio" id="-" value ="-" name=calculation/>
<br>
<label for "+">x</label>
<input type="radio" id="x" value ="x" name=calculation/>
<br>
<label for "+">÷</label>
<input type="radio" id="div" value ="div" name=calculation/>
</fieldset>
Second value: <input name="number2" type="text" size=10 id='num2'/> <input type="submit" value="compute" onclick=""/>
<br>
Result: <input id='result' readonly ></td>
</body>
</html>
And the result looks like this:
However, I want to create something like this:
Then it looks like I have to change the width for the radio buttons and change the color for the buttons. And, how do I come up with the correct JavaScript code?
solution2
-1 2021-05-04 02:43:25
I have the following HTML and JavaScript code for a simple calculator.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js" defer></script>
</head>
<body>
<h1>Calculator</h1>
First value: <input name="number1" type="text" size=10 id='num1'/>
<fieldset>
<label for "+">+</label>
<input type="radio" id="+" value ="+" name=calculation/>
<br>
<label for "+">-</label>
<input type="radio" id="-" value ="-" name=calculation/>
<br>
<label for "+">x</label>
<input type="radio" id="x" value ="x" name=calculation/>
<br>
<label for "+">÷</label>
<input type="radio" id="div" value ="div" name=calculation/>
</fieldset>
Second value: <input name="number2" type="text" size=10 id='num2'/> <input type="submit" value="compute" onclick=""/>
<br>
Result: <input id='result' readonly ></td>
</body>
</html>
And the result looks like this:
However, I want to create something like this:
Then it looks like I have to change the width for the radio buttons and change the color for the buttons. And, how do I come up with the correct JavaScript code?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.