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

Question

我可以用同一 html 页面上的 textarea 的值动态替换 h1 元素的值。但是，一旦我在页面上放置了多个表单，将 h1 标记放在一个表单上，并将 textarea 放在另一个表单上，当我尝试仅使用纯 Javascript 将 h1 值更新为 textarea 值时，什么也没有发生。

我尝试过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： 函数新标题（） { 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>