在另一个HTML页面中更改div

Question

still learning some javascript here, got done other things but now the final and most important part of it.

I have two html pages - one of which uses javascript to dynamically add text-fields (and to remove them of course) (genmain.html) and the other one where the text field input should go(table.html).

So i have already created a function to retrieve the array of values.

function getElementArray(divName){
   var names = document.getElementsByName("namefield");
}

The variable names is an array and it has all the values from fields.

The problem is I would like to set these values from array to the values of another div on the page. After some searching i understood that it could be done with 'id'-s but i'm not that sure and don't completely understand how.

Let's say i have a lot of div's on another page (table.html) but some of them have id="MAIN". I would like to change the value inside of the div

For example

<div id="MAIN">THIS PART I WANT TO CHANGE</div>

Javascript is not part of my school system and i've done CodeAcademy tutorials and that's the most i've got about this, I hope you guys can help with my issue.

Answer 1

The variable names is an array and it has all the values from fields.

function getElementArray(divName){
   var names = document.getElementsByName("namefield");
}

Nope, you've only got reference to the elements here. You've not got the value yet.

You can get the values by iterating through the names Nodelist array and use names[i].value

The problem is I would like to set these values from array to the values of another div on the page

If it's going to be in same page, then use innerHTML or textContent property of the DOM to assign the value.

document.getElementById("MAIN").textContent= names[1].value;

Just for demo purpose am using names[1] here so it will load the second input value.

Let's say i have a lot of div's on another page (table.html) but some of them have id="MAIN". I would like to change the value inside of the div

Once you move to another page, the javascript state will be lost. So you wont have access to names inside that page.

Either you must store the values into localStorage and retrieve in next page.

Else add the values to query string of your URL and retrive it there.

Edit: Update based on comments

Let us assume you have var names = document.getElementsByName("namefield"); so to store the values inside localStorage.

var myValues = [],
    names = document.getElementsByName("namefield");
    for(var i = 0; i < names.length; i++) {
        myValues.push(names[i].value);
    } 
    localStorage.myValues = JSON.stringify(myValues);

Now if your next page, Iinside window.onload event:

   window.onload = function() {
       var myValues = localStorage.getItem("myValues") ? JSON.parse(localStorage.getItem("myValues")) : [],
           divElements = document.querySelectorAll("#MAIN");
       for(var i =0; i < myValues.length; i++) {
           divElements[i].textContent = myValues[i];
       }
   }

Answer 2

If you want to set or change the contents of an element, you can use the innerHTML property.

So in your case, document.getElementById("MAIN").innerHTML = "Whatever you want";

For the record, names in your example technically isn't an array, but a NodeList . See https://developer.mozilla.org/en/docs/Web/API/NodeList#Why_is_NodeList_not_an_Array.3F .