带有数字 onclick 的总和字符串答案

【问题标题】：sum string with number onclick带有数字 onclick 的总和字符串
【发布时间】：2018-11-14 19:04:52
【问题描述】：

我有一个全局变量：

var a;

我将我的 onclick 函数串联到我的 html div PHP 中：

$number =' <div onclick="select(this,'."'250000'".');" > ';
$number .= ...etc...  //php function
$number .='</div>';

将字符串插入 div 值 onclick (button) :

function select (price){
if ($(id).attr('class') == "table2") { //unselect button
    $(id).attr('class', 'table1');
    var price2=document.getElementById("price").value.split(",");
    var removePrice = price;;
    var price3 = jQuery.grep(price2, function (value) { return value != removePrice;});
    document.getElementById("price").value = price3;
    if (n.length == 0) i = 0;
} else {
    $(id).attr('class', 'table2'); //select button
    if (i == 0) {
        document.getElementById("price").value = price;
        a = Number(document.getElementById("price").value); //assign the value into a
        i = 1;  
    } else {
        $(id).attr('class','table3');
    }  
}

从那里，我有复选框 HTML ：

<div id="CourseMenu"><input type="checkbox" value="50000" />&nbsp Ekstra Bed <input type="checkbox" value="50000"  />&nbsp Breakfast</div>

之后，我有 另一个 函数来求和 2 个 div 值（复选框）：

$(function($) {
  var sum = 0;
  $('#CourseMenu :checkbox').click(function() { sum = 0;
    $('#CourseMenu :checkbox:checked').each(function(idx, elm) {
        sum += parseInt(elm.value, 10);
    });
    var b  = parseInt(a||0, 10) + parseInt(sum||0, 10); 
    $('#sum').html(b); //<--resulted NaN when sum with button
    document.getElementById("price").value=b; //<-- assign b as div value
  });
});

目的是将总价格（按钮和复选框）汇总为div值

<input type="hidden" id="price" name="price" value="" />

当函数只对 checkbox 求和时，它可以正常工作，但是当我尝试使用 button（全局变量）显示总和时，它会导致 NaN

我想我已经将字符串转换为数字了，我的代码有问题吗？

【问题讨论】：

var value = document.getElementById("price").value * 1
另外，不要将 jquery $("#.. 与 javascript document.getElementById( 混合使用。
很可能a（漂亮的变量名...）在到达求和函数之前已经是NaN。你能做一个小提琴显示它不工作吗？
select 在哪里 - 请显示更多 HTML 和相关脚本
在添加前检查a的类型..typeof(a)

标签： javascript php jquery

【解决方案1】：

我认为您在 onclick 事件中传递参数时遇到问题： onclick="select(this,'250000');" => 将此作为第一个参数传递尝试更改为 onclick="select('250000')";

但是您的选择函数期望字符串作为第一个参数：

function select(price){ //<-- simplified
   document.getElementById("price").value=price;
   a = Number(document.getElementById("price").value); 
}

【讨论】：

你的意思是函数正在传递 (this,number) 所以它将字段添加到字段值 - 我认为我们需要看看“简化”是什么意思

【解决方案2】：

这是您的 X/Y 问题的实际解决方案。

代码将初始化字段，单击按钮或选中复选框独立工作。

function calc() {
  var sum = parseInt($("#price").text(), 10);
  $('#CourseMenu :checkbox:checked').each(function() {
    sum += parseInt(this.value, 10);
  });
  $('#sum').val(sum);
}
$(function() {
  $("#CourseMenu .btn").on("click", function() {
    $("#price").text($(this).data("price")); // using the data attribute
    calc(); 
  });
  $('#CourseMenu input:checkbox').on("click",function() { 
    calc(); // 
  });
  calc(); // initialise in case the page is reloaded.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="CourseMenu">
  <button type="button" class="btn" data-price="25000">25000</button>
  <button type="button" class="btn" data-price="35000">35000</button>
  <div id="price">0</div>

  <br/>
  <label>
    <input type="checkbox" value="200" />200</label>
  <label>
    <input type="checkbox" value="300" />300</label>
  <label>
    <input type="checkbox" value="400" />400</label>
  <br/>
  <input type="text" id="sum" value="" />
</form>

PS：如果你在点击复选框时什么都不做，你可以写

  $('#CourseMenu input:checkbox').on("click",calc);

【讨论】：