Question

我可以动态地将h1元素的值替换为同一html页面上的textarea的值。但是，一旦我在页面上放置了几个表单，在一个表单上放置了h1标签，并将textarea放在另一个表单上，当我尝试使用textarea值使用ONLY普通Javascript更新h1值时没有任何反应。

我尝试getElementById，getElementByTagName，innerHTML和setAttribute无济于事。这是不可能的还是我错过了什么？我在网上找不到一个解决这个问题的例子。

更新：

  <form id=form1 action="">
    <h1 id="h1tag">I'm H1</h1>
  </form>

  <form>
   <label for='text1'>Change H1:</label>
   <input type="textarea" value="" id="text1"/>
   <button onclick="newHeading();">newHeading()</button>
  </form>

外部javascript： function newHeading（） { document.getElementById（h1tag）.innerHTML = document.getElementById（text1）.value; }

Answer 1

使用简单的function和ID的

function updateH1(ta,h1) {
    var textArea=document.getElementById(ta),header=document.getElementById(h1);
    if(textArea.value) {
        header.innerHTML=textArea.value;
    }
    else {
        textArea.focus();
    }
}

然后在form中将onsubmit()设置为return false时使用它：

<h1 id="test_h1">This will change</h1>
<form onsubmit="return false;">
    <label for="text1">Change H1:</label>
    <input type="text" value="" id="text1"/>
    <button onclick="updateH1('text1','test_h1');">updateH1()</button>
</form>

使用另一个表单元素的textarea值动态更新h1元素

1 个答案: