Question

首先，对不起，如果问题看起来真的很蠢，我真的不习惯Javascript。

我正在寻找一个脚本来改变一些文本，具体取决于用户写的内容。这就是我要找的东西：

1个文本有3个输入（A，B和C）。
“文字”将显示添加A，B和C.
示例：输入A为3，B为5，C为10.文本= 18。

我准备了一些脚本，但它只是脚本的“骨头”..

function ShowPointsNeeded(text){
document.getElementById("result").innerHTML =text; }

#result {
  height:50px;
  width:50px;
  border:1px solid #999; 
  font-size:25px; 
  text-align:center;
  margin-left:15px;
}

<div id="text">
<input id="slide" type="text" value=""
onchange="ShowPointsNeeded(this.value);" />
</div>
<div id="result"></div>

- ＆GT;它只是一个基本脚本，在一个小框中显示输入的内容。现在，我想要的是3个输入和小方框来显示它们的添加。

谢谢！

Answer 1

每次调用ShowPointsNeeded()时，您都需要对所有输入值求和。你可以使用reduce（）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
function ShowPointsNeeded(){
   document.getElementById("result").innerHTML = $('input').toArray().reduce((acc,cur) => acc + Number(cur.value), 0);
}
</script>  

   <div id="text">
<input id="slide1" type="text" value=""
onchange="ShowPointsNeeded();" />
<input id="slide2" type="text" value=""
onchange="ShowPointsNeeded();" />
<input id="slide3" type="text" value=""
onchange="ShowPointsNeeded();" />
</div>
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

Answer 2

如果想要计算所有输入的总和，那么您可以使用以下逻辑：

function ShowPointsNeeded(){
           //while doing calculation you have to consider all textboxes every time, 
           //so you have to derive a way to get all your related textboxes at once, 
           //e.g. : i have use name attribute to make all input boxes relate to each 
           //other.
            var allInputs = document.getElementsByName("numbers");
            var sum=0.0;
            for(var i=0;i<allInputs.length;i++){
                if(allInputs[i].value.length>0)
                sum= sum+parseFloat(allInputs[i].value); 
                //parsing float because user can input decimals as well
            }
            document.getElementById("result").innerHTML=sum; 
        }

       <div id="text">
        <input id="slide" type="text" value="" name="numbers"
        onchange="ShowPointsNeeded();" />
        <input id="slide" type="text" value="" name="numbers"
        onchange="ShowPointsNeeded();" />
        <input id="slide" type="text" value="" name="numbers"
        onchange="ShowPointsNeeded();" />
        </div>
        <div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

Answer 3

JavaScript Number()函数，用于将文本转换为数字：

＆＃13;

function ShowPointsNeeded() {
  var values = [];
  var elements = document.getElementsByTagName('input');

  for (var i = 0; i < elements.length; i++) {
    values.push(elements[i].value);
  }

  var sum = values.reduce(sumElements, 0);

  var resultElement = document.getElementById("result"); 
  resultElement.innerHTML = sum; 
}

function sumElements(total, num) {
  return Number(total) + Number(num);
}

＆＃13;

<div id="text">
  <input type="text" value="" onchange="ShowPointsNeeded(this);" />
  <input type="text" value="" onchange="ShowPointsNeeded(this);" />
  <input type="text" value="" onchange="ShowPointsNeeded(this);" />
</div>
<div id="result" style="height:50px;width:50px;border:1px solid #999; font-size:25px; text-align:center; margin-left:15px;"></div>

＆＃13;

对于输入，不需要id属性。

JS - 根据用户的输入更改文本

3 个答案: