Javascript 单击时清除并减去JQuery值

我需要从输入框中清除一个值（#我的值#1），然后从总计中减去该值（#总计和#总计#div）

这就是我到目前为止所做的。。。我已成功地将JQuery值传递给隐藏的文本框和div，并在值传递给它们时统计了这些项。我已经设法从输入框和div中“清除”了#我的#值和#我的#值#2，但现在我正努力从#总计和#总计#div中减去这些值。有人能给我指出正确的方向吗

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $('#my_div').click(function() {
        $('#my_value_1').val("100");
        $('#my_value_1_div').html("100");
        $('#my_div').click(addNumbers('total'));
    });
});

$(document).ready(function() {
    $('#my_div_2').click(function() {
        $('#my_value_2').val("200");
        $('#my_value_2_div').html("200");
        $('#my_div_2').click(addNumbers('total'));
    });
});

function addNumbers() {
    var val1 = parseInt(document.getElementById("my_value_1").value);
    var val2 = parseInt(document.getElementById("my_value_2").value);
    var ansD = document.getElementById("total");
    ansD.value = val1 + val2;
    $('#total_div').text(ansD.value);
}

$(document).ready(function() {
    $('#clear').click(function() {
        $('#my_value_1').val('0');
        $('#my_value_1_div').html("0");
        $('#clear').click(minusNumbers());
    });
});

function minusNumbers() {
    var minval1 = parseInt(document.getElementById("my_value_1").value);
    var minval2 = parseInt(document.getElementById("total").value);
    var minansD = document.getElementById("total");
    minansD.value = minval2 - minval1;
    $('#total_div').text(minansD.value);
}

$(document).ready(function() {
    $('#clear2').click(function() {
        $('#my_value_2').val('0');
        $('#my_value_2_div').html("0");
        $('#clear').click(minusNumbers());
    });
});

function minusNumbers() {
    var minval1 = parseInt(document.getElementById("my_value_2").value);
    var minval2 = parseInt(document.getElementById("total").value);
    var minansD = document.getElementById("total");
    minansD.value = minval2 - minval1;
    $('#total_div').text(minansD.value);
}
</script>

<h2>My pretty front end</h2>

<div id="my_div">ADD THIS VALUE 1</div>

<div id="my_div_2">ADD THIS VALUE 2</div>

VALUE 1:
<div id="my_value_1_div">0</div>

VALUE 2:
<div id="my_value_2_div">0</div>

TOTAL:
<div id="total_div">0</div>

<div id="clear">CLEAR VALUE 1</div>

<div id="clear2">CLEAR VALUE 2</div>

<h2>My hidden Form</h2>

Value 1:
<input type="text" id="my_value_1" name="my_value_1" value="0" />Value 2:
<input type="text" id="my_value_2" name="my_value_2" value="0" />
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()" />Total:
<input type="text" id="total" name="total" value="" />

$（文档）.ready（函数（）{
$（'my#u div'）。单击（函数（）{
$（'my#u value_1'）.val（“100”）；
$（'my#u value_1_div'）.html（“100”）；
$（'my#u div'）。单击（addNumbers（'total'）；
});
});
$（文档）.ready（函数（）{
$（'#my_div_2'）。单击（函数（）{
$（'my#u value_2'）.val（“200”）；
$（'my#u value_2_div'）.html（“200”）；
$（'my#u div_2'）。单击（addNumbers（'total'）；
});
});
函数addNumbers（）{
var val1=parseInt（document.getElementById（“my_value_1”）.value）；
var val2=parseInt（document.getElementById（“my_value_2”）.value）；
var ansD=document.getElementById（“总计”）；
ansD.value=val1+val2；
$（'#总计_div'）。文本（ansD.value）；
}
$（文档）.ready（函数（）{
$（“#清除”）。单击（函数（）{
$（'my#u value_1'）.val（'0'）；
$（'my#u value_1_div'）.html（“0”）；
$（“#清除”）。单击（minusNumbers（））；
});
});
函数号（）{
var minval1=parseInt（document.getElementById（“my_value_1”）.value）；
var minval2=parseInt（document.getElementById（“total”）.value）；
var minansD=document.getElementById（“总计”）；
minansD.value=minval2-minval1；
$（'total_div'）.text（minansD.value）；
}
$（文档）.ready（函数（）{
$（'#clear2'）。单击（函数（）{
$（'my#u value_2'）.val（'0'）；
$（'my#u value_2_div'）.html（“0”）；
$（“#清除”）。单击（minusNumbers（））；
});
});
函数号（）{
var minval1=parseInt（document.getElementById（“my_value_2”）.value）；
var minval2=parseInt（document.getElementById（“total”）.value）；
var minansD=document.getElementById（“总计”）；
minansD.value=minval2-minval1；
$（'total_div'）.text（minansD.value）；
}
我漂亮的前端
将此值加1
将此值加2
值1：
0
价值2：
0
总数：
0
清除值1
清除值2
我的隐藏形态
值1：
价值2：
总数：

很抱歉，我刚刚意识到我在下面指出的错误是因为我将我的js放在小提琴上，以便在加载时运行，所以当然超出了范围。您可以忽略第一点，但我认为答案仍然适用于您的问题，如果我错了，请纠正我

因此，它在控制台中显示的错误是addNumbers未定义。这是因为它超出了范围。一种解决方案是将单击事件绑定到按钮上，就像对div所做的那样。如果这是表单的一部分，您还可以将事件传递给回调函数，并在尝试提交表单时调用

event.preventDefault（）

停止

这里有一个稍微修改过的例子，我还注意到没有真正需要负数，因为你只需要把这些数字加起来就可以得到总数（除非我误解了它的用途，在这种情况下可以加回去）

$（'my#u div'）。单击（函数（）{
$（'my#u value_1'）.val（“100”）；
$（'my#u value_1_div'）.html（“100”）；
addnumber（）；
});
$（'#my_div_2'）。单击（函数（）{
$（'my#u value_2'）.val（“200”）；
$（'my#u value_2_div'）.html（“200”）；
addnumber（）；
});
$（“#清除”）。单击（函数（）{
$（'my#u value_1'）.val（'0'）；
$（'my#u value_1_div'）.html（“0”）；
addnumber（）；
});
$（'#clear2'）。单击（函数（）{
$（'my#u value_2'）.val（'0'）；
$（'my#u value_2_div'）.html（“0”）；
addnumber（）；
});
$（“#总数”）。单击（函数（事件）{
event.preventDefault（）
addnumber（）；
});
函数addNumbers（）{
var val1=parseInt（document.getElementById（“my_value_1”）.value）；
var val2=parseInt（document.getElementById（“my_value_2”）.value）；
var ansD=document.getElementById（“总计”）；
ansD.value=val1+val2；
$（'#总计_div'）。文本（ansD.value）；
}

我漂亮的前端
将此值加1
将此值添加到2值1：
0值2：
0总计：
0
清除值1
清除值2
我的隐藏形态
值1：
价值2：
总数：

您的输出是什么？另外，根据个人要求，您能在代码中添加缩进吗？我发现很难理解：）您不需要多次使用

文档。ready

应该在整个文档中使用一次，并包含所有事件处理程序。上述注释也适用于您的。。。附言：我看不到你那边有任何努力。。。这是一个在一小时内发布的后续问题。。。感觉你是众包你的工作。谢谢你戈布我会记住这一点，在未来，但我不是真的跟随你的问题。谢谢你给我的提示，巴山川崎。TJ，恕我直言，我已经在这段代码上工作了将近两天，我是一个完全的JS新手，所以你和我的努力水平很可能是天壤之别。我被告知发布一个新问题，而不是编辑我的前一个问题，这就是为什么在这里。我编辑了这个问题，但我真的不明白为什么它在一开始就被标记为不清楚。回答正确的是@Quince。谢谢@Quince，这看起来很完美。这比我想的要简单得多，抱歉。但我正在学习：）