Question

I can dynamically replace the value of an h1 element with the value of a textarea that is on the same html page. However, once I place several forms on the page, the h1 tag on one form, and place the textarea on another, nothing happens when I try to update the h1 value with the textarea value using ONLY plain Javascript.

I have tried getElementById, getElementByTagName, innerHTML and setAttribute to no avail. Is this impossible or I am missing something? I cannot find a single example on the web that addresses this.

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>

The external javascript:
function newHeading()
{
document.getElementById(h1tag).innerHTML = document.getElementById(text1).value;
}

Answer 1

Use a simple function with the proper ID‘s

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

Then use it in your form with the onsubmit() set to 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>