結果未顯示

Question

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    var result = document.getElementById('answer').value;
    if (document.getElementById('add')) {
        function myFunction() {
            add1 = document.getElementById('num1').value;
            add2 = document.getElementById('num2').value;
            ans = (parseInt(add1)+parseInt(add2));
            result.innerHTML = ans;
        }
    }
</script>
</head>
<body>
<input type="text" id="num1" />
    <select id="problem">
        <option id="add">+</option>
        <option id="sub">-</option>
        <option id="mul">x</option>
        <option id="div">÷</option>
    </select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
</body>
</html>

我試圖通過從兩個文本框中獲取值來創建一個求和器，然后單擊按鈕后，它應將結果發布在下面的文本框中。 但是，它沒有這樣做。

我還希望程序更改使用帶有數學符號的下拉菜單解決問題的方式。

謝謝。

Answer 1

我想你是在追求這樣的事情

function myFunction() {
    var result = document.getElementById('answer'),
        operator = document.getElementById('problem').value,
        add1 = document.getElementById('num1').value,
        add2 = document.getElementById('num2').value,
        ans = 0;

    switch (operator) {
        case '+':
            ans = (parseInt(add1) + parseInt(add2));
            break;
        case '-':
            ans = (parseInt(add1) - parseInt(add2));
            break;
        case 'x':
            ans = (parseInt(add1) * parseInt(add2));
            break;
        case '÷':
            ans = (parseInt(add1) / parseInt(add2));
            break;
    }

    result.value = ans;
}

只需使用一個函數並確定操作數，而不是使用if語句並創建不同的函數。

編輯：此外，請注意您的變量聲明。 未聲明“ ans”，“ add1”和“ add2”，這導致創建了全局變量

Answer 2

問題應該在於線

var result = document.getElementById('answer').value;

試試下面的代碼片段

var result=document.getElementById('answer');
ans = (parseInt(add1)+parseInt(add2));
result.value=ans;

http://jsfiddle.net/2W5za/1/

Answer 3

你有幾個問題。 不確定if用途，但是將其刪除。 此外，設置一個文本框的值value不innerHTML 。

function myFunction() {
    var result = document.getElementById('answer');
    add1 = document.getElementById('num1').value;
    add2 = document.getElementById('num2').value;
    ans = (parseInt(add1)+parseInt(add2));
    result.value = ans;
}

http://jsfiddle.net/LjqMJ/

Answer 4

關於問題的第一部分（以及該問題的標題），我看到的一個問題是這行代碼：

var result = document.getElementById('answer').value;

result是什么類型？ 稍后，您將其視為具有result.innerHTML = ans;的DOMElement result.innerHTML = ans; 通過假定它具有一個innerHTML屬性。 但是，因為您使用了.value所以實際上它是一個沒有innerHTML的string 。

關於第二部分，可以通過查看<select>的.value來斷言哪個功能。 <option>標記將始終存在，無論是否選中它們。

概括地說，我強烈建議您使用chrome或firefox中的調試器進行檢出。 這將使您可以在代碼中放置一個斷點，並確定該值是否被正確地計算，並以交互方式查看其試圖寫入的內容。

Chrome瀏覽器： https ： //developers.google.com/chrome-developer-tools/docs/javascript-debugging

Firefox： https ： //developer.mozilla.org/en-US/docs/Tools/Debugger

Answer 5

您的代碼有很多錯誤。 但是，要解決您的問題，請將= ans更改為= ans.toString();

您會發現，在javascript中， 整數和字符串在沒有轉換的情況下無法更改彼此的值（有點像兄弟姐妹拒絕共享），因此toString()用於轉換為String 。

要更改的另一件事是將innerHTML更改為value ，因為您正在處理文本框。

Answer 6

<!DOCTYPE html>
<html>
<head></head>
<body>
 <input type="text" id="num1" />
    <select id="problem">
        <option value="add">+</option>
        <option value="sub">-</option>
        <option value="mul">x</option>
        <option value="div">%</option>
    </select>
 <input type="text" id="num2" />
 <br />
 <input type="submit" onclick="myFunction();" />
 <br />
 <input type="text" id="answer" readonly />


 <script type="text/javascript">
     function myFunction() 
     {
         var e = document.getElementById("problem");
         var sOperation = e.options[e.selectedIndex].value;
         add1 = document.getElementById('num1').value;
         add2 = document.getElementById('num2').value;
         var ans;
         if (!isNaN(add1) && !isNaN(add2)){
        if(sOperation=='add'){
            //Add
            ans = parseInt(add1)+parseInt(add2);
        } else if (sOperation=='sub') {
            //Subtract
            ans = parseInt(add1)-parseInt(add2);
        } else if (sOperation=='mul') {
            //Multiple
            ans = parseInt(add1) * parseInt(add2);
        } else if (sOperation=='div') {
            //Divide
            ans = parseInt(add1) / parseInt(add2);
        }
        document.getElementById("answer").value = ans;      
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

Answer 7

HTML

<input type="text" id="num1" />
<select id="problem">
    <option id="add">+</option>
    <option id="sub">-</option>
    <option id="mul">x</option>
    <option id="div">÷</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />

JavaScript的

function myFunction() {
    var result = document.getElementById('answer');
    var operator = document.getElementById('problem').value;
    var add1 = document.getElementById('num1').value;
    var add2 = document.getElementById('num2').value;
    var ans;
    if (!isNaN(add1) && !isNaN(add2)) {
        //Addition
        if (operator == '+')

        {

            ans = (parseInt(add1) + parseInt(add2));
        }
        //Subtraction
        else if (operator == '-') {

            ans = (parseInt(add1) - parseInt(add2));

        }
        //Multiplication
        else if (operator == 'x') {

            ans = (parseInt(add1) * parseInt(add2));

        }
        //Division
        else if (operator == '÷') {

            ans = (parseInt(add1) / parseInt(add2));
        }
        //Result
        result.value = ans;
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

小提琴演示

結果未顯示

問題描述

7 個解決方案

解決方案1
1 已采納 2013-12-31 05:20:36

解決方案2
1 2013-12-31 05:38:30

解決方案3
0 2013-12-31 05:07:58

解決方案4
0 2013-12-31 05:11:04

解決方案5
0 2013-12-31 05:17:52

解決方案6
0 2013-12-31 05:23:56

解決方案7
0 2013-12-31 05:55:43

結果未顯示

問題描述

7 個解決方案

解決方案1 1 已采納 2013-12-31 05:20:36

解決方案2 1 2013-12-31 05:38:30

解決方案3 0 2013-12-31 05:07:58

解決方案4 0 2013-12-31 05:11:04

解決方案5 0 2013-12-31 05:17:52

解決方案6 0 2013-12-31 05:23:56

解決方案7 0 2013-12-31 05:55:43

解決方案1
1 已采納 2013-12-31 05:20:36

解決方案2
1 2013-12-31 05:38:30

解決方案3
0 2013-12-31 05:07:58

解決方案4
0 2013-12-31 05:11:04

解決方案5
0 2013-12-31 05:17:52

解決方案6
0 2013-12-31 05:23:56

解決方案7
0 2013-12-31 05:55:43