Need Help targetBg.setAttribute('src', wholeUrl); ?

vmars316 · 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

dsonesuk · 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.

vmars316 · September 1, 2019

Ah yes , I see , <script> should be placed just before </body>

Thanks

Sign In

Need Help targetBg.setAttribute('src', wholeUrl); ?

Recommended Posts

vmars316

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity