Decided to go a bit different way as the file names are different. Article file name: Month Year Article.extension Calendar file name: Calendar for Month Year.extension
Extensions are different. Article extensions: PDF, DOC, HTM Calendar extensions: PDF, DOCX, HTML
The article portion of the code works if I comment out the calendar part which tells me there's a duplicate variable somewhere???? Or maybe I can't do 2 modals with the same script???
Is there an easier way to do this? I know there is a way to only list the months and year once and then call those arrays(??) through code. And is there a way I can NOT have a 'current' URL link visible? You know users, they'll see a link and click on it without realizing they need to select the drop downs and then click the button to populate the link.
Too many files to rename or I'd do it so I don't have to work through all this code.
As a side note, why does my code posted here disappear when I alt-tab to another screen and come back? Using chrome on Windows 7 machine. This is why my other posts are missing code. It keeps disappearing.
here's my code.
<h2>Please Select Article or Calendar.</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Monthly Article</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form>
Select the year:
<select id="mySelect">
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
</select>
<br />
Select the month:
<select id="mySelect1">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<br />
Select PDF, Word or Webpage:
<select id="mySelect3">
<option>pdf</option>
<option>doc</option>
<option>htm</option>
</select>
<br><br>
<input type="button" onclick="myFunction()" value="Click Me!">
<br />
<a id="myLink" href="http://www.MyOrg.org/Star/April 2017 Article.pdf">Get Article here</a>
</form>
<script>
function myFunction() {
var obj = document.getElementById("mySelect");
var obj1 = document.getElementById("mySelect1");
var obj3 = document.getElementById("mySelect3");
document.getElementById("myLink").innerHTML = "New Link";
document.getElementById("myLink").href = "http://www.MyOrg.org/Article/" +
obj1.options[obj1.selectedIndex].text + " " +
obj.options[obj.selectedIndex].text + " Bethlehem Star." +
obj3.options[obj3.selectedIndex].text;
document.getElementById("myLink").target = "_blank";
}
</script>
</div>
</div>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">Monthly Calendar</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form>
Select the year:
<select id="mySelectC">
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
</select>
<br />
Select the month:
<select id="mySelectC1">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<br />
Select PDF, Word or Webpage:
<select id="mySelectC3">
<option>pdf</option>
<option>docx</option>
<option>html</option>
</select>
<br><br>
<input type="button" onclick="myFunctionC()" value="Click Me!">
<br />
<a id="myLinkC" href="http://www.MyOrg.org/Article/April 2017 Calendar.pdf">Get Calendar Here</a>
</form>
<script>
function myFunctionC() {
var objC = document.getElementById("mySelectC");
var objC1 = document.getElementById("mySelectC1");
var objC3 = document.getElementById("mySelectC3");
document.getElementById("myLinkC").innerHTML = "New Link";
document.getElementById("myLinkC").href = "http://www.MyOrg.org/Article/Calendar for " +
objC1.options[obj1.selectedIndex].text + " " +
objC3.options[obj3.selectedIndex].text;
document.getElementById("myLinkC").target = "_blank";
}
</div>
</div>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
Aucun commentaire:
Enregistrer un commentaire