Need help to invoke a function properly

[spock9458]

I am trying to create a web page for newsletters that will show an image as a button, and when the button is clicked it will invoke the appearance of a w3.css Modal window with a full PDF copy of the newsletter in an iframe object, using the Google docs viewer. On my page will be numerous newsletter “buttons” and I want to assign a value to my “newsDate” variable at the same time that the Modal window opens. The format of my PDF file names are as follows: Newsletter_050420.pdf. When my Modal window opens, the value of the newsDate variable needs to be inserted in the “src” attribute of the iframe, so only the “050420” value needs to be assigned to newsDate. Here is what I have tried so far:

<button id="news-CSS" onclick="document.getElementById('viewerModal').style.display='block'; newsDate='050420'"></button>

And here is the code for my Modal:

<div id="viewerModal" class="w3-modal">
  <div class="w3-modal-content">
	<header class="w3-container"><h3>Latest News</h3></header>
    <div class="w3-container">
	<script>
		function changeDate() {
		var newsDate;
		
		document.getElementById("shownews").src="https://docs.google.com/gview?url=https://shcsfarmington.org/2020/docs/Newsletter_" + newsDate + ".pdf&embedded=true";
		}
	</script>
		
	<iframe id="shownews"  style="width:90%;height:500px"></iframe>
	
	</div>
	<footer class="w3-container">
		<div class="w3-row">
			<div class="w3-half">
			<button class="w3-button w3-2018-blooming-dahlia w3-round" onclick="document.getElementById('newsModal').style.display='none'">Close</button>
			</div>
			<div class="w3-half">
			<a href="docs/Newsletter_050420.pdf" download class="w3-button w3-2018-blooming-dahlia w3-round">Download or Print</a>
			</div>
		</div>
    </footer>
  </div>
</div>

This result does not work, as can be seen at this URL: [https://shcsfarmington.org/2020/news.html]
(https://shcsfarmington.org/2020/news.html)

I appreciate any help to make this work. Thanks!

[m_hutley]

So, to be clear, the modal works, it’s just your iframe isnt loading the data.

You’ve created the function, but you need to call it.

<button id="news-CSS" onclick="document.getElementById('viewerModal').style.display='block'; newsDate='050420'">

<script>
	function changeDate() {
	var newsDate;
	
	document.getElementById("shownews").src="https://docs.google.com/gview?url=https://shcsfarmington.org/2020/docs/Newsletter_" + newsDate + ".pdf&embedded=true";
	}
</script>

Right, so. I would clean this up a bit. Let’s rearrange things.

<button id="news-CSS" onclick="changeDate('050420');">

	<script>
		function changeDate(datetoset) {
		var newsDate = datetoset;
		document.getElementById("shownews").src="https://docs.google.com/gview?url=https://shcsfarmington.org/2020/docs/Newsletter_" + newsDate + ".pdf&embedded=true";
		document.getElementById('viewerModal').style.display='block'; 
		}
	</script>

That way all your javascripty change-the-things bit are in the function, and the button only sends the function the one piece of data it needs - the date.

EDIT: In fact, we don’t even need to redefine ‘newsDate’ at all - it’s a redundant variable, because we’ve already got something holding the date inside the function - the parameter. So a little more tidying up:

<script>
	function changeDate(newsDate) {
	document.getElementById("shownews").src="https://docs.google.com/gview?url=https://shcsfarmington.org/2020/docs/Newsletter_" + newsDate + ".pdf&embedded=true";
	document.getElementById('viewerModal').style.display='block'; 
	}
</script>

[spock9458]

@m_hutley - that is perfect!! I really appreciate your help with this, and your solution works perfectly. Thanks!

[spock9458]

Now I have another question on this same topic. I have another page on this website that shows buttons for various other publications, and so I adapted the script advice from m_hutley to create another script for this page that changes the “docName” so I can call the different PDF files to one viewer Modal. This works fine, but clearly shows a “glitch” or something with the Google doc viewer - the behavior is that the document displayed in the iFrame does not always refresh with the button click. Sometimes it takes two or three “reloads” of the page in order to get the correct document to show in the viewer. Is there any way to work around this problem in the javascript? I have tried using:

location.reload(true); 

this.location.reload(true);

in various locations in my code, but nothing seems to work correctly. I would appreciate any help to try and avoid this problem. It can be observed at this link: https://shcsfarmington.org/2020/

[m_hutley]

It looks like you’ve got an extraneous " on line 137? All of your buttons are working for me except that one…