Простой калькулятор HTML / JavaScript не работает?

0

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;

    }

}

По какой-то причине, когда я нажимаю кнопку "Расчет", она ничего не делает. Любая помощь будет потрясающей! Благодарю!

Теги:
calculator

4 ответа

0
Лучший ответ

см. эту скрипку для вашего ответа.

  1. Ваш ответ был неверно назван "ответ", а не "ответ"
  2. У вашего Drop Down не было значений, назначенных параметрам.
  3. Вам нужно было проанализировать Целочисленные значения перед назначением текста диапазона.
  4. Вместо использования document.getElementById('Answer').value = answer; вы должны использовать document.getElementById('Answer').innerHTML = answer;
Поделиться
  • 0
    Это все еще не отображало ответ.
  • 0
    изменил мой ответ. увидеть скрипку
Показать ещё 2 комментария
1

Попробуйте этот код

<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. Это исправит проблему :)

Поделиться
  • 0
    По какой-то причине это НЕ РАБОТАЕТ, я не знаю почему, Вы можете помочь?
0

Очень простой калькулятор (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;
}

пример

http://jsfiddle.net/trjsJ/

Поделиться
0

Я обнаружил две ошибки.

  1. Капитал A в document.getElementById('Answer'). Когда это должно быть document.getElementById('answer'). Поскольку имя id также мал a.
  2. вместо .value = answer он должен быть .textContent = answer или innerText/innerHtml.

Демо: http://jsfiddle.net/techsin/uVpxr/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню