getElementById("bodyId").style.background:url ?

programming
1

Hello & Thanks:
I need help modifying css attribute .
I want to change the:
#bodyId {
font-family: Comic Sans MS;
background-image: url(background-image-01.jpg) ;
background-repeat: no-repeat;
background-size: cover;
}
Code runs with no errors , but no results .
Here is my code:

<html>
<html>
	<head>
		<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 
https://www.w3schools.com/jsref/compman.gif 
https://www.freeformatter.com/html-validator.html 
-->
<style> 
#bodyId {
         font-family: Comic Sans MS;
		 background-image: url(background-image-01.jpg) ;
		 background-repeat: no-repeat;
		 background-size: cover;
	}

.buttonPos {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>
<script> </script>

</head>
<body id="bodyId"  class="bodyClass" onload="resizeImage()"> 
<!--
            background="background-image-01.jpg" background = "background-size = cover;">
    <body onload="documentURL()"> 
--> 
<br>
<script>
var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; 
window.addEventListener("resize", resizeImage());

function resizeImage() { 
// alert("function resizeImage() {")

var targetBody = document.getElementById("bodyId"); 
// 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>
<script>
    var imageCount = 0 ; var nextImage = "background-image-01.jpg" ;
    var targetBg = document.getElementById("bodyId"); 
function changeImage() {
    imageCount = imageCount + 1 ;
if (targetBg.hasAttribute("background")) {
    document.getElementById("bodyId").style.background-image:url = "background-image-02.jpg";
    x = document.getElementById("bodyId").style.background:url ;  
    console.log("x = " +  x) ;
	if (imageCount == 5)  { imageCount = 0;}
  }
</script>
<script>
/* holdArea : 
    imageCount = imageCount + 1 ;
    elem = document.getElementById("myImage");   // element.style.backgroundColor = "red";
    if (imageCount == 1) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-02.jpg"); } }
    if (imageCount == 2) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-03.jpg"); } }
    if (imageCount == 3) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-04.jpg"); } }
    if (imageCount == 4) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-05.jpg"); } }
    if (imageCount == 5) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-01.jpg"); } }
//   targetBg.setAttribute("url","background-image-0"+((imageCount % 5)+1)+".jpg");
//    targetBg.setAttribute("url","background-image-0"+((imageCount % 5)+1)+".jpg");
*/
</script>

    <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image">

</body>
</html>

Thanks for your help !

2

The way you set the backgroundImage via JavaScript is by doing something similar to the following:

var rocketElement = document.querySelector(".rocket");
rocketElement.style.backgroundImage = `url(https://www.kirupa.com/images/rocket.svg)`;

Your property is the CSS property name (both backgroundImage or background-image like you have will work). You shouldn’t mix any part of the value as a part of specifying the property.

:slight_smile:

3

Ugh !
Still have probs , see code:
If I use this combination:
background-image: url(background-image-01.jpg) ; // css
if (imageCount == 1) {targetBg.style.background-image = “url(background-image-02.jpg)” ; } // js

I get this error:
Uncaught ReferenceError: Invalid left-hand side in assignment

If I use this combination:
backgroundImage: url(background-image-01.jpg) ; // css
if (imageCount == 1) {targetBg.style.backgroundImage = “url(background-image-02.jpg)” ; } // js

I get this error:
Uncaught TypeError: Cannot read property ‘style’ of null
at changeImage
AND no image is displayed .

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
<style>        
body {
         font-family: Comic Sans MS;
		 background-repeat: no-repeat;
		 background-size: cover;
		 background-image: url(http://vmars.us/ShowMe/background-image-01.jpg) ;
//		 backgroundImage: url(http://vmars.us/ShowMe/background-image-01.jpg) ;

/*
		 background-image: url(background-image.jpg) ;
         background-repeat: no-repeat;
*/
	}
.buttonPos {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>
<script> </script>
<body id="bodyId">  <!--  onload="resizeImage()" >  -->
<!--    <body onload="documentURL()">  --> 
<br>
<script>
var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; 
window.addEventListener("resize", resizeImage());

function resizeImage() { 
 alert("function resizeImage() {")

var targetBody = document.getElementById("bodyId"); 
// 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>
<script language="javascript">
    var imageCount = 0 ; var nextImage = "background-image-01.jpg" ;
    var targetBg = document.getElementById("body"); 
function changeImage() {
    imageCount = imageCount + 1 ;
    if (imageCount == 1) {targetBg.style.background-image = "url(http://vmars.us/ShowMe/background-image-02.jpg)" ; }
//    if (imageCount == 1) {targetBg.style.backgroundImage = "url(http://vmars.us/ShowMe/background-image-02.jpg)" ; }
  }
</script>
    <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image">
</body>
</html>

Thanks

4

Happy t say , I found my error:
Had this:
var targetBg = document.getElementById(“body”);

Should of had this:
var targetBg = document.getElementById(“bodyId”);
Thanks

5

Haha nice work! This one is is my favorite error:

Uncaught TypeError: Cannot read property ‘style’ of null

It almost always means that there is some typo I made in my getDocumentBy* or querySelector call :stuck_out_tongue:

1 Like