Question

我想在一个简单的数学方程中使用三个textareas，但我的javascript代码没有找到元素。

这是html：

<div id="textarea-container">
    <label>Revenue $ </label>
    <textarea id="textarea-formula-revenue" class="formula" maxlength="5"></textarea>
    <label> - Cost $ </label>
    <textarea id="textarea-formula-cost" class="formula" maxlength="5"></textarea>
    <label> = Profit $ </label>
    <textarea id="textarea-formula-profit" class="formula" maxlength="5"></textarea>
</div>

这是Javascript：

function myFormula() {
    $('.formula').focus(function(event) {

        alert(document.getElementById("textarea-formula-profit").value);

        var r = document.getElementById("textarea-formula-revenue").value;
        var c = document.getElementById("textarea-formula-cost").value;
        var p = r - c;

        document.getElementById("textarea-formula-profit").value = p;

    })
}

$(document).ready(myFormula);

警报实际上有效但其余代码却没有。我很感激你能提供的任何帮助。谢谢！

Answer 1

textarea-formula-revenue在getElementById（＆＃39; texarea-formula-revenue＆＃39;）中写错了。对于textarea-formula-profit也是如此。你自己就改变了两种版本的texarea-formula-cost。

Answer 2

正如@Ted所提到的，只要有几个问题，你的代码就会出现几个问题。我不是混合纯JS和jQuery的粉丝 - 如果我们使用库，那么document.getElementById的用途是什么？最好使用jQuery short等效。

其次，最好使用change（）方法，而不是即使进入textarea也会触发的focus（）。

我将把我的代码分析出来：

<div id="textarea-container">
   <label>Revenue $ </label>
   <textarea id="textarea-formula-revenue" class="formula" maxlength="5">0</textarea>
   <label> - Cost $ </label>
   <textarea id="texarea-formula-cost" class="formula" maxlength="5">0</textarea>
   <label> =  Profit $ </label>
   <textarea id="textarea-formula-profit" class="formula" maxlength="5">0</textarea>
   </div>

JS部分：

function myFormula(){
var r = 0, c = 0, p = 0;

$('.formula').change(function() {

    r = $("#textarea-formula-revenue").val();
    c = $("#texarea-formula-cost").val();

    p = r - c;
    if (!isNaN(p)) {
        $("#textarea-formula-profit").val(p);
    }

})
}
$(document).ready(myFormula);

我认为检查利润的价值是否可靠显示也是一件好事，因此!isNan(p)检查。

Answer 3

您的代码存在一些问题...主要是ID中的拼写错误。运行下面的代码段，看它是否有效：

＆＃13;

$(document).ready(function () {
    $('.formula').focus(function (event) {
        var r = $("#textarea-formula-revenue").val(),
            c = $("#textarea-formula-cost").val(),
            p = r - c;
        $("#textarea-formula-profit").val(p);
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textarea-container">
    <label>Revenue $</label>
    <textarea id="textarea-formula-revenue" class="formula" maxlength="5">10</textarea>
    <label>- Cost $</label>
    <textarea id="textarea-formula-cost" class="formula" maxlength="5">2</textarea>
    <label>= Profit $</label>
    <textarea id="textarea-formula-profit" class="formula" maxlength="5"></textarea>
</div>

＆＃13;

找不到Javascript元素

3 个答案: