显示系列用户输入元素的Javascript代码_Javascript_Html

显示系列用户输入元素的Javascript代码

javascript html

显示系列用户输入元素的Javascript代码,javascript,html,Javascript,Html,我希望在同一页的文本框中显示用户输入的从1到10的一系列数字，一个数字在另一个数字的下方。3的倍数也应为红色 <html> <head> <script> function testVariable() { var strText = document.getElementById("textone").value; var result = strText; document.getElementById('

我希望在同一页的文本框中显示用户输入的从1到10的一系列数字，一个数字在另一个数字的下方。3的倍数也应为红色

<html>

<head>
  <script>
    function testVariable() {
      var strText = document.getElementById("textone").value;
      var result = strText;
      document.getElementById('spanResult').textContent = result;
    }
  </script>
</head>

<body> <input type="text" id="textone" /> <button onclick="testVariable()">Submit</button> <br /> <span id="spanResult"> </span> </body>

</html>


函数testVariable（）{
var strText=document.getElementById（“textone”）.value；
var结果=strText；
document.getElementById（'spanResult'）。textContent=result；
}
提交

您想要这样的系列剧还是其他的？

函数testVariable（）{
var strText=document.getElementById（“textone”）.value；
var结果=strText；
对于（var i=1；i
//获取对容器元素的引用
const container=document.getElementById（'listOfNumbersContainer'）；
//获取对按钮的引用并侦听“单击”事件
const button=document.querySelector（'button'）；
按钮。addEventListener（'单击'，（e）=>{
让val=document.getElementById（'numberInputElement'）.value；//检索输入元素的值
//创建一个新的div元素
//并附加用户输入
设div=document.createElement（'div'）；
div.innerHTML=val；
//添加css类。如果值是3的倍数，则元素为红色
如果（值%3==0）{
div.classList.add（'is-red'）；
}
//将元素添加到容器中
子容器（div）；
})；
div.is-red{
颜色：红色；
}

提交
如果您很接近，您可能希望使用innerHTML
而不是textContent
，以便在创建新元素时可以对其应用red
类：

.red{
颜色：红色；
}

函数testVariable（）{
var strText=document.getElementById（“textone”）.value；
var元素=document.createElement（“span”）；
element.innerHTML=strText+“
”；
如果（数字（strText）%3==0）
元素。类列表。添加（“红色”）；
document.getElementById（'spanResult'）。innerHTML+=element.outerHTML；
}
提交


我尝试了以下代码。不确定是否使用多个输入和颜色变化函数testVariable（）{var strText=document.getElementById（“textone”）.value；var result=strText；document.getElementById（'spanResult'）。textContent=result；}提交
谢谢。它对3,6,15有效（颜色变化），但对6,9无效。@bhagyashreejamdar我已更新代码，请查看它对以3的倍数输入的数字有效（以任何顺序）不完全适用于实际数的倍数3@bhagyashreejamdar你所说的3的实际倍数是什么意思？它起作用了。谢谢你，所以我希望显示文本框中输入的每个数字，而不是1到10的序列