Question

如何使用innerHTML用段落填充某些文本？我需要在文本框中输入一个数字，然后重复一些文本，次数与在文本框中输入的数字相同。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex10.js</title>
</head>
<body>
    <input type="text" id="input-type" onKeyUp="myFunction()">
    <p id="sample-text">Here is some text</p>
    <script>
        function myFunction() {
            let count = document.getElementById("input-type").value;
            document.getElementById("sample-text").innerHTML = count;

            if (isNaN(count)) {
                document.getElementById("sample-text").innerHTML = "Error. Not a number";
            }
            else {
                for(int i = 0; i < count; i++) {
                    document.getElementById("sample-text").innerHTML = "This is some text";
                }

            }
        }
    </script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex10.js</title>
<script>
     function myFunction() {
        var count = document.getElementById("input-type").value;


        if (isNaN(count)) {
            document.getElementById("sample-text").innerHTML = "Error. Not a number";
        }
        else {
             // create your empty array
        var lines = "";

        // loop x amount of times and add your text to the array
        for (var i = 0; i < count; i++) {
            lines = lines+"Atmiya\n";
        }

        // convert the array to a string, with each string on its own line
        document.getElementById("sample-text").innerHTML = lines;
            }

        }
    </script>
</head>
<body>
    <input type="number" id="input-type" onKeyUp="myFunction()">
    <p id="sample-text">Here is some text</p>

</body>
</html>

Answer 2

document.getElementById("sample-text").innerHTML = someVar;

这将在您每次调用html元素时完全覆盖其内容，这可能是您的问题。

您要做的是预先构建字符串，然后再填充一次。如何构建数组，然后使用join创建字符串？

// create your empty array
var lines = [];

// loop x amount of times and add your text to the array
for (var i = 0; i < count; i++) {
    lines.push("This is some text");
}

// convert the array to a string, with each string on its own line
document.getElementById("sample-text").innerHTML = lines.join("\n");

Answer 3

有一些技巧可以使其变得更容易：

类型为“数字”的
元素用于让用户输入数字。它们包括内置验证以拒绝非数字条目。浏览器可能会选择提供步进箭头，以使用户可以使用其鼠标或只需用指尖点击来增加和减少该值。

您还可以使用+=运算符连接到元素的innerHTML属性。

onchange可能比onkeyup更好用。我不确定onkeyup是否可以在触摸屏上使用。而且数字输入框几乎没有控件可以更改值。

function go() {
  let text = document.querySelector('#sample-text').innerHTML;
  let times = document.querySelector('#times').value;
  let output = document.querySelector('#output');
  let ix = 0;

  output.innerHTML = '';

  while (ix < times) {
    output.innerHTML += text;
    ix++;
  }
}

<input type="number" min="1" id="times" onchange="go()">
<p id="sample-text">Here is some text</p>
<p id="output"></p>

for循环和innerHTML

3 个答案: