javascript - "Writing"在使用 JS 和 JS 作用域的 HTML 页面内

标签 javascript html arrays

我正在开发一个程序,它基本上只接收两次来自用户的输入(风险载体和总和,但这只是一个占位符,使我的程序不那么抽象),将这两个值组合在一起,然后在循环中重复内容.请参阅下面的代码。

<head>

<script type="text/javascript">
function fillArray(){
    document.getElementById("danke").innerHTML = "Thanks for specifying the amount of entries.";
    var numberOfEntries = parseInt(document.getElementById('input0').value);
    var i = 0;
    var myArrA = [];
    var myArrB = [];
    var x = " ";
    while(i<numberOfEntries){
       var neuRT = prompt("Enter a risk carrier");
       myArrA.push(neuRT);
       var neuRH = prompt("Enter a risk sum");
       myArrB.push(neuRH);
       i++;
    }
    for(i = 0; i<anzahlEintraege; i++){
        x = myArrA[i] + " carries a risk of " + myArrB[i];
    document.getElementById("test").innerHTML = x;
    }

}


</script>
</head>

<body>

<h1>risk assessment</h1>

<input type="text" id="input0" />
<button type="button" onclick="fillArray()">Number of entries</button> <p id="danke"></p>

<button type="button" onclick="untilNow()">Show all entries so far</button>
<br />
<br />
<div id="test"></div>

</body>
</html> 

我的问题是:

1.) 我想通过写入 HTML 元素来显示数组,这是我在 for 循环中尝试过的。应避免弹出窗口。如何循环遍历 HTML 元素,例如 demo1、demo2、demo3 等?我不能只写 <p id="demo" + i></p> .还有哪些其他选择?

2.) 假设我想使用 untilNow() 函数。我的数组范围仅限于 fillArray()。我是否需要将数组作为参数“返回”到 untilNow() 函数?

谢谢大家!!!

最佳答案

您当前代码的问题在于,您在每个循环中都将 html 替换为最后一个值。您使用的是 = 而不是 +=。因此,一个快速的解决方法是替换:

document.getElementById("test").innerHTML = x; 

通过:

document.getElementById("test").innerHTML += x;

关于如何在 HTMLElements 中包装字符串数组并将它们添加到文档中的示例(请注意,还有许多其他方法/库可以实现相同的结果):

var myStrings = ["Hello", "stack", "overflow"];

// Two performance rules:
// 1. Use a fragment to prevent multiple updates to the DOM
// 2. No DOM queries in the loop
var newContent = myStrings.reduce(function(result, str) {
  var li = document.createElement("li");
  var txt = document.createTextNode(str);
  li.appendChild(txt);
  result.appendChild(li);
  
  return result;
}, document.createDocumentFragment()); 


// Actually add the new content
document.querySelector("ul").appendChild(newContent);
<ul class="js-list"></ul>

关于javascript - "Writing"在使用 JS 和 JS 作用域的 HTML 页面内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39916024/

相关文章:

php - 来自 Ajax 和 php 的错误响应

javascript - 如何从 Instagram 获取基于用户和基于标签的照片

javascript - 执行 window.print 时的边距和填充问题

javascript 不适用于动态添加的选项卡

javascript - 尽管调用了 .fadeOut 命令,但 Gif 没有淡出

java - Java中数组使用 'new'

来自 Array with Multine 的 PHP 正则表达式 preg_match 不匹配所有 block

java - 编译Java文件时出错(数组,嵌套if语句)

javascript - 为什么我需要将单词 this 添加到我的 javascript 方法中

javascript - 如何阻止 html 中元素的掉落?