vmars316 Posted August 31, 2019 Share Posted August 31, 2019 Hello & Thanks , Can't seem to get this going : targetBg.setAttribute('src', wholeUrl); <!DOCTYPE html> <html> <head> <title></title> </head> <style> body { font-family: Comic Sans MS; /* background-repeat: no-repeat ; background-size: cover ; backgroundImage: url(http://vmars.us/ShowMe/background-image-01-Ratio-600x476.jpg) ; */ } /* #spanBg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } */ /* #spanImg #spanBg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } /* #spanBg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } */ #spanBg { border-style: solid ; top: 0px; width: 100% ; height: 100% ; align-text: center ; } #spanImg { width: 1000px ; // window.outerWidth ; // height: 800px ; // window.outerHeight ; // src: "http://vmars.us/ShowMe/background-image-01.jpg" ; } */ #bottomDiv { border-style: solid ; border-width: 1px; position: absolute; bottom: 0px; left: 10px; } .buttonPos { width: 140px; top: 400px ; } #divId{ text-align: center ; } </style> <script> var widthChange ; var Change ; var heightChange ; var repeatChange ; var sizeChange ; var positionChange ; var targetBg = document.getElementById("spanDiv"); function changeBackground() { widthChange = width.value; heightChange = height.value; sizeChange = size.value; // if (heightChange !== "") { alert("heightChange = " + heightChange ) ; // targetBg.style.backgroundImage = heightChange ;} ; if (sizeChange !== "") { alert("sizeChange = " + sizeChange ) ; targetBg.style.backgroundSize = sizeChange ;} ; } </script> <script> var imageCount = 1 ; var targetBg = document.getElementById("spanImg"); var bgImgUrl = "http://vmars.us/ShowMe/background-image-0" ; var bgExt = ".jpg" ; var wholeUrl ; function changeImage() { imageCount = ((imageCount % 5)+1) wholeUrl = bgImgUrl + imageCount + bgExt ; // targetBg.style.src = wholeUrl ; // doesn't work // document.getElementById("spanImg").style.src = wholeUrl ; alert("targetBg = " + targetBg) ; targetBg.setAttribute('src', wholeUrl); alert("wholeUrl = " + wholeUrl) ; var checkSrc = document.getElementById("spanImg").style.src ; alert("Img src = " + checkSrc) ; }</script> <body id="bodyId" > <!-- background = "background-image-01.jpg"> --> <!-- onload="resizeImage()" <span id="spanBg"; > --> <span id="spanBg"; > <img id="spanImg" onclick="changeImage()" src="http://vmars.us/ShowMe/background-image-01.jpg" alt="background-image" width="800px" > <center> <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image"> </center> </span> <!-- id="spanBg"; --> <!-- <script> var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; window.addEventListener("resize", resizeImage()); function resizeImage() { // alert("function resizeImage() {") var targetBody = document.getElementById("spanDiv"); // alert(targetBody) ; bodyWidth = window.outerWidth ; //alert("bodyWidth = " + bodyWidth + " window.outerWidth = " + window.outerWidth ) ; bodyHeight = window.outerHeight ; targetBody.setAttribute("width" , bodyWidth ) ; targetBody.setAttribute("height" , bodyHeight ) ; targetBody.setAttribute("background.img.width" , bodyWidth ) ; targetBody.setAttribute("background.img.height" , bodyHeight ) ; // alert( 'bodyWidth = ' + bodyWidth + " bodyHeight = " + bodyHeight) ; } </script> --> </body> </html> Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted September 1, 2019 Share Posted September 1, 2019 Page read top to bottom, if javascript references an element with id or class before that element is read it does not exist yet and error undefined is produced. Link to comment Share on other sites More sharing options...
vmars316 Posted September 1, 2019 Author Share Posted September 1, 2019 Ah yes , I see , <script> should be placed just before </body> Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now