HTML-код (Calculator.html):
<!DOCTYPE html>
<html>
<head
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Calculator</title>
<link type="text/css" rel="stylesheet" href="/Calculator_CSS.css">
</head>
<body>
<input type ="text" name="number1" style="width:50px;" id="Number1">
<select id="DropdownMenu1">
<option>+</option>
<option>-</option>
<option>×</option>
<option>÷</option>
</select>
<input type ="text" name="number2" style="width:50px;" id="Number2">
<input type="button" value="Calculate" id="submitButton" />
<p>The answer is: <span id="answer"></span></p>
<script src="Calculator_JS.js>"></script>
</body>
</html>
Вот код JavaScript (Calculator_JS.js):
var button = document.getElementById("submitButton");
button.onclick = function(){
if (document.getElementById("DropdownMenu1").value == "+"){
var num1 = document.getElementById('Number1').value;
var num2 = document.getElementById('Number2').value;
var answer = num1 + num2;
document.getElementById('Answer').value = answer;
}
}
По какой-то причине, когда я нажимаю кнопку "Расчет", она ничего не делает. Любая помощь будет потрясающей! Благодарю!
см. эту скрипку для вашего ответа.
document.getElementById('Answer').value = answer;
вы должны использовать document.getElementById('Answer').innerHTML = answer;
Попробуйте этот код
<html>
<body>
<script type="text/javascript">
function Calc(){
var num1a = document.getElementById("num1");
var num2a = document.getElementById("num2");
var ans = (num1a + num2a)
document.write("<b>The Answer Is:</b>" + ans)
}
</script>
<input type ="text" id="num1" style="width:50px;" id="Number1">
<input type ="text" id="num2" style="width:50px;" id="Number2">
<input type="button" value="Calculate" id="submitButton"
onClick="Calc()">
</body>
</html>
(Type 2 Numbers, и он будет вводить ответ (x + y)). Проблема заключается в том, что он печатает его как строку: в первом текстовом поле число равно 5, а во втором - 5, а затем, когда нажата кнопка Calculate, покажет
Ответ: 55, а не 10...
Итак, что вам нужно сделать, так это:
ParseInt(document.getElementById("num1").value);
ParseInt(document.getElementById("num2").value);
и не
document.getElementById("num1");
document.getElementById("num2");
в var num1a и num2a. Это исправит проблему :)
Очень простой калькулятор (html5 css3 js)
JS
function calc(e){
var a=e.target.innerText,b=this.firstChild;
b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);
window.onload=function(){
document.body.appendChild(gui);
}
CSS3
body,html{
height:100%;
margin:0;
padding:0;
background-color:#666;
}
*{
box-sizing:border-box;
}
.clc{
width:256px;
height:320px;
clear:both;
}
.clc>*{
border:4px solid #666;
border-radius:4px;
font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
border-radius:10px;
}
.clc>input{
width:100%;
height:20%;
text-align:right;
padding:0 20px;
}
.clc>div{
width:25%;
height:20%;
background-color:#5a5a5a;
color:#fff;
text-align:center;
float:left;
}
.clc>div:nth-child(4n+1){
background-color:#f36573;
}
.clc>div:nth-last-child(1){
width:100%;
background-color:#ffb343;
}
пример
Я обнаружил две ошибки.
document.getElementById('Answer')
. Когда это должно быть document.getElementById('answer')
. Поскольку имя id также мал a..value = answer
он должен быть .textContent = answer
или innerText/innerHtml.