JavaScript Change page1.htm to page2.htm in iFrame2 in table row 1 cell 0

[ggunzelman]

I have a simple information page that I display in an iFrame. The web page consists of a single table with 2 rows. The top row has a logo and some buttons. The 2nd row displays a .htm page in an iFrame. We'll call this page2024.htm. In the top row there is a Select construct to allow the user to choose page2023.htm. These are historical information pages. I can see the Select working as I watch the Chrome Console log but I cannot get the page to change properly. Instead of displaying the page in the same cell, it overwrites the entire web page with page2023.htm. Below is the code in question. I first set the cell to Page2024.htm and then a script executes on the Select change to change the page to the value in Select. I cannot figure out what is wrong. I am new to Javascript. The site was done in Dreamweaver and the two pages to display are .htm saves of Excel files.

<tr data-id="xlsxDisplay" bgcolor="#FFFFFF">
<td  colspan="2">
<iframe name="iFrame2" id="iFrame2" width="1980" height="925" frameborder="0" scrolling="yes" src="Page2024.htm"></iframe>
&nbsp;
<a href="Page2024.xlsx">Download Excel File</a>

<script type="text/javascript">
  $('#navYear').on('change',function(){
    var url = $(this).val();
    console.log(url)
    document.getElementById("xlsxDisplay").innerHTML= document.write('<iframe id="iFrame2" scrolling="yes" height="925" width ="1980" frameborder="0" src='+url+'><\/iframe>');
  })
</script>

 

[Johna]

From the code you have provided, there's no element with the xlsxDisplay id. If you meant to select the data-id="xlsxDisplay", then use the following syntax:

document.querySelector("[data-id=xlsxDisplay]")

// or since you're using jQuery anyway, just use this:
$("[data-id=xlsxDisplay]")

The document.write() method writes a text string to an open document stream. In your case, since there is no open document, the entire page will be replaced with what is inside the write() method.
The use of this method doesn't return any value and cannot be assigned to an element's innerHTML;

For normal JavaScript you would have to create the iframe element using the document.createElement() method, but since you're using jQuery, you can do the simpler way, by using the html() method:

$(selector).html("<p>this text will be input in the inner html of the selected element</p>");

There is another way of changing the content of the iframe, rather than replacing the entire frame. This can be done with setAttribute() method on the iframe element (attr() for jQuery):

// plain js
document.querySelector(selector).setAttribute("src", new_source_url);

// jQuery
$(selector).attr("src", new_source_url);

Here's the full jQuery code using the attr() method:

$("#navYear").on("change", function() {
  $("#iframe2").attr("src", $(this).val());
});