Динамическое обновление элемента h1 значением textarea другого элемента формы

Question

Я могу динамически заменить значение элемента h1 значением textarea, которое находится на той же html-странице. Однако после размещения нескольких форм на странице, тега h1 на одной форме и размещения текстовой области на другой, ничего не происходит, когда я пытаюсь обновить значение h1 значением textarea, используя ТОЛЬКО простой Javascript.

Я пытался getElementById, getElementByTagName, innerHTML и setAttribute безрезультатно. Это невозможно или я что-то упустил? Я не могу найти ни одного примера в Интернете, который бы адресовал это.

UPDATE:

  <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: функция 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>