Question

我需要将来自多个字段的输入数据存储到JS变量中，然后将它们粘贴到文本中。这是我的代码，由于某种原因似乎没有起作用。

这些是输入字段：

    <ul id="listings">
            <li><input type="text" id="adjectives1" value="Adjective"></li>
            <li><input type="text" id="adjectives2" value="Adjective"></li>
            <li><input type="text" id="adjectives3" value="Adjective"></li>
    </ul>

以下是文字：

<div id="textualdiv"> As the <span id="adjective1">fatal</span> mating dance of a pair of black holes with a total mass of more than a billion suns. Mostly in the form of <span id="adjective2">violent</span> in space-time known as  <span id="adjective3">gravitational</span> waves.</div>

</div>

这是JS脚本：

<script>
var adjective1 = document.getElementById("adjectives1").value;
var adjective2 = document.getElementById("adjectives2").value;
var adjective3 = document.getElementById("adjectives3").value;
</script>

<script>
document.getElementById('adjective1').innerHTML = adjective1;
document.getElementById('adjective2').innerHTML = adjective2;
document.getElementById('adjective3').innerHTML = adjective3;
</script>

它仅粘贴输入字段中已存在的文本中的默认“形容词”值。但是，如果我输入其他内容，它不会改变文本，但会继续显示形容词。

Answer 1

您需要使用更改事件处理程序，该处理程序将在更改输入值时更新目标元素内容。

function update(el){
  var value = el.value;
  document.getElementById(el.id.replace('adjectives', 'adjective')).innerHTML = value;
}

Answer 2

您可以将onchange事件挂钩到输入，这样当您更改输入中的任何内容时，就会更改范围标记上的innerHTML。

<input type="text" id="adjectives1" value="Adjective" onchange="document.getElementById('adjective1').innerHTML = this.value;">

如何将JS输入表单中的数据存储到文本中？

2 个答案: