Question

我正在制作一个函数，该函数需要使用for循环来输出两个数字之间的所有数字。如果用户选择mvn dependency:tree -Dverbose -Dincludes=spring-core和1，则我的函数将输出4。尽管我的功能可以按需要工作，但使用1,2,3,4的输出却不希望合作（仅覆盖最终答案（4）），而document.GetElementById则将我带到另一页我不要我需要的是一种替换我的p id ='replaceOne'的方法，该方法将所有数字都放在同一页上。谢谢！

document.write()

function Counter() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  for (i = number1; i <= number2; i++) {
    var answer1 = [i];
    document.write(answer1);
  }
}

Answer 1

您可以创建一个具有短名称的函数，该函数的作用与document.getElementById相同，并将其添加到元素的innerHTML中。
功能：const elm = id => document.getElementById(id)。这行只是Arrow Function的return元素，其ID已提供给该函数。与

相同

function elm(id){
    return document.getElementById(id)
}

更新innerHTML ： elm('replaceOne')返回一个元素。每个元素都有一个属性innerHTML。在这种情况下，innerHTML是''。我正在使用添加分配将i添加到现有的innerHTML中。 elm('replaceOne').innerHTML += i;行与

相同

elm('replaceOne').innerHTML = elm('replaceOne').innerHTML + i;

const elm = id => document.getElementById(id)
function Counter() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  for (i = number1; i <= number2; i++) {
    var answer1 = [i];
    elm('replaceOne').innerHTML += i;
  }
}

  <table>
    <tr>
      <td align="left" valign="top">
<p class=headerOne><h3>Counter a</h3>
<textarea id="number1" class="box"></textarea><br>
<textarea id="number2" class="box"></textarea><br>
<button type="button" onclick="Counter()">Find range</button><br>
<p>Your result is: </p>
<p id="replaceOne"></p>
      </td>
</table>

Answer 2

不确定我是否理解这个问题，但听起来您只是在寻找这样的东西？

const $ = function(id) { return document.getElementById(id) },
      counter = function() {
        let answer = [],
            number1 = $('number1').value,
            number2 = $('number2').value;
        for (i = number1; i <= number2; i++) {
          answer.push(i);        
        }
        $('replaceOne').innerHTML = answer;
      };
      
      
// Or es6 is nice too, or can make this whole thing even smaller;
// but for the sake of simple example, not shown here.

<h3>Counter</h3>
<textarea id="number1" class="box"></textarea><br>
<textarea id="number2" class="box"></textarea><br>
<button type="button" onclick="counter()">Find range</button><br>
<p>Your result is: <strong id="replaceOne"></strong></p>

Answer 3

使用document.getElementById是正确的方法。您尝试将其写入for循环内，这就是为什么只有第一项的原因。您应该将结果连接成字符串，然后在循环后进行设置

Answer 4

将所有数字放入数组中，然后在html中显示

let res = document.getElementById('replaceOne');

function Counter() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  
  let result = [];
  
  for (let i = number1; i <= number2; i++) {
    result.push(i);
  }
  
  res.textContent = result.join(', ');
}

<table>
    <tr>
      <td align="left" valign="top">
        <p class=headerOne><h3>Counter a</h3>
        <textarea id="number1" class="box"></textarea><br>
        <textarea id="number2" class="box"></textarea><br>
        <button type="button" onclick="Counter()">Find range</button><br>
       <p>Your result is: </p>
       <p id="replaceOne"></p>
     </td>
    </tr>
</table>

getElementById和Document.write的替代方法

4 个答案: