Question

我需要清除输入框中的值（＃my_value_1），然后从总计中减去该数量（#total和#total_div）。

这就是我到目前为止所做的...我已经成功地将JQuery值传递给隐藏的文本框和div，并在将值传递给它们时计算这些项目。我已经设法从输入框和div中“清除”#my_value和＃my_value_2，但现在我正在努力从#total和#total_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="" />

Answer 1

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

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

所以这里有一个稍微重复的例子，我也注意到没有真正需要减号，因为你只需要添加数字来获得总数（除非我误解了它的目的，在这种情况下它可以添加回来）

$('#my_div').click(function() {
  $('#my_value_1').val("100");
  $('#my_value_1_div').html("100");
  addNumbers();
});

$('#my_div_2').click(function() {
  $('#my_value_2').val("200");
  $('#my_value_2_div').html("200");
  addNumbers();
});
$('#clear').click(function() {
  $('#my_value_1').val('0');
  $('#my_value_1_div').html("0");
  addNumbers();
});

$('#clear2').click(function() {
  $('#my_value_2').val('0');
  $('#my_value_2_div').html("0");
  addNumbers();
});


$('#totalNumbers').click(function(event) {
  event.preventDefault()
  addNumbers();
});


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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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" id="totalNumbers" name="Sumbit" value="Click here" />Total:
<input type="text" id="total" name="total" value="" />

清除和减去JQuery值onclick

1 个答案: