1

私は Javascript にやや慣れていないので、3 つのテキスト入力、1 番目の数値テキスト ボックス、操作テキスト ボックス、2 番目の数値テキスト ボックスを持つ基本的な電卓を作成しようとしていますが、クリックしてもテキストが出力されません。ボタンまたはその他の方法を使用してイベントをトリガーします。これは私のコードです:

<html>
<script>
function calc()
{
    var D = "";
    var A = document.getElementById("num1").value;
    var B = document.getElementById("op").value;
    var C = document.getElementById("num2").value;
    if(B == "+")
    {
        D = A+C;
    }
    elseif(B == "-")
    {
        D = A-C;
    }
    elseif(B == "*")
    {
        D = A*C;
    }
    elseif(B == "/")
    {
        D = A/C;
    }
    document.getElementById("result").innerHTML = D;
}
</script>

<body>
    <input type="text" id="num1" name="num1" />
    <input type="text" id="op" name="op" />
    <input type="text" id="num2" name="num2" />
    <br />
    <input type="button" value="Solve" onclick="calc()" />

    <p id="result" name="r1">
        <br />
    </p>

</body>
</html>
4

6 に答える 6

2

次のことをお勧めします（コード自体にコメントされている説明）：

function calc() {
        /* finds out whether the browser uses textContent (Webkit, Opera, Mozilla...)
           or innerText (Microsoft) to set the text of an element/node */
    var textType = Node.textContent ? 'textContent' : 'innerText',
        /* uses parseFloat to create numbers (where possible) from the entered value
           if parseFloat fails to find a number (it's empty or nonsensical)
           then a 0 is used instead (to prevent NaN being the output). */
        num1 = parseFloat(document.getElementById('num1').value) || 0,
        num2 = parseFloat(document.getElementById('num2').value) || 0,
        // retrieves the result element
        result = document.getElementById('result');

    // switch is used to avoid lots of 'if'/'else if' statements,
    // .replace() is used to remove leading, and trailing, whitespace
    // could use .trim() instead, but that'd need a shim for (older?) IE
    switch (document.getElementById('op').value.replace(/\s/g,'')){
        // if the entered value is:
        // a '+' then we set the result element's text to the sum
        case '+':
            result[textType] = num1 + num2;
            break;
        // and so on...
        case '-':
            result[textType] = num1 - num2;
            break;
        case '*':
            result[textType] = num1 * num2;
            break;
        case '/':
            result[textType] = num1 / num2;
            break;
        // because people are going to try, give a default message if a non-math
        // operand is used
        default:
            result[textType] = 'Seriously? You wanted to try math with that operand? Now stop being silly.'
            break;
    }
}

JS フィドルのデモ。

参考文献:

于 2013-04-14T01:12:11.777 に答える
1

私は少し違うことをしていたでしょうが、あなたの質問に答えてコードを機能させるために、次のことを行いました：

作り直したコードは次のとおりです。

<html>
<script>
function calc(form) {

var D = "0";
var A = document.getElementById("num1").value;
var B = document.getElementById("op").value;
var C = document.getElementById("num2").value;

if (B === "+")
{
D = parseInt(A)+parseInt(C); 
}
else if(B === "-")
{
D = parseInt(A)-parseInt(C);
}
else if(B === "*")
{
D = parseInt(A)*parseInt(C);
}
else if (B === "/")
{
D = parseInt(A)/parseInt(C);
}
document.getElementById("result").innerHTML = D;
return false;
}
</script>
<body>

<input type="text" id="num1" name="num1" />
<input type="text" id="op" name="op" />
<input type="text" id="num2" name="num2" />
<br />
<input type="button" value="Solve" onClick="calc(this)">

<p id="result" name="r1">
<br />
</p>

</body>
</html>

if ステートメントの式が値をテキストのように扱っていたため、parseint() を使用しました。

次に、=== を使用する必要があります。これは、A が実際には + に等しいか、2 番目の入力値が何であるかを示します。

3 番目は onclick でした。関数 calc と書かれている行でわかるように、(this) とフィードバック フォームを作成しました。

念のため、return false を追加しました。フォームの送信を防止します (ただし、それがなくても機能します)。

また、他のポスターと同様に、それはelse ifであり、elseifではないと述べています。

これがお役に立てば幸いです。繰り返しますが、私は別のことをしますが、いくつかの説明でうまくいきました。

于 2013-04-14T01:49:47.807 に答える