Jump to content
vmars316

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...