0

Hi i'm a beginer in javascript, i'm trying to change background Imgage css style but i have this error: Failed to load resource: the server responded with a status of 404 (Not Found).

 <div id="slide"></div>

css

#slide{
     background-repeat: no-repeat;
    background-size: 93%;
    position: absolute;
    right: 1%;
    top:25%;
    height: 70%;
    width: 44%;
    overflow: hidden;
}

JC

var i = 0;      
var images=[];
var slide = document.getElementById("slide");
var time = 3000;
     
images[0] = '../image/1.jpg';
images[1] = '../image/2.jpg';
images[2] = '../image/3.jpg';
images[3] = '../image/4.jpg';
images[4] = '../image/5.jpg';
images[5] = '../image/6.jpg';
images[6] = '../image/7.jpg';

function changeImg(){
    slide.style.backgroundImage = "url('images[i]')";

    if(i < images.length - 1){
    
      i++; 
    } else { 
    
        i = 0;
    }


    setTimeout("changeImg()", time);
}

window.onload=changeImg;
Wiskani
  • 9
  • 2
  • The path is incorrect. – Spectric Nov 29 '21 at 01:58
  • I tryed with url(images[i]) instead url('images[i]') din't work either – Wiskani Nov 29 '21 at 02:09
  • `"url('images[i]')"` has no relation to `images`. It’s `\`url(${images[i]})\``. Also, please follow the advice from the documentation: use [array literals](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#common_operations), don’t rely on [global ID properties (or is `slide` vs. `slideencu` a typo?)](/q/3434278/4642212), use [functions for `setTimeout` (i.e. `changeImg`)](//developer.mozilla.org/docs/Web/API/setTimeout#passing_string_literals), use [`addEventListener` instead of `on*` properties](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener). – Sebastian Simon Nov 29 '21 at 02:10
  • fixed slide vs slideencu and didn't work, i'm thinking may be is slide.style.backgroundImage becauso i tried: prueba ='../image/1.jpg' and slide.style.backgroundImage = "url('prueba')"; and lide.style.backgroundImage = "url(prueba)" and lide.style.backgroundImage = "url(${prueba})" and did not work either. – Wiskani Nov 29 '21 at 02:25
  • _“Fixed slide vs slideencu”_ — your question _now_ shows a mismatched ID: `id="slide"` vs. `document.getElementById("slideencu")`. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`). The dev tools provide an **Inspector** / **Elements** and a **Network** tab. If the resource is _not found_ (e.g. HTTP 404 response), which _actual URL_ is requested? Amend the URL accordingly. Make sure your background is on a _visible_ element with _positive height and width_. Use [template literals correctly](/q/37245679/4642212). – Sebastian Simon Nov 29 '21 at 02:30
  • Thaks Simon but this not the problem i fixed document.getElementById("slide")( is was an erro to copu VSC), but i tried just slide.style.backgroundImage = "url('../image/1.jpg')"; and work, but when put a variable don't work – Wiskani Nov 29 '21 at 02:42
  • @Wiskani And what do the Inspector and the Network tab say? – Sebastian Simon Nov 29 '21 at 02:52
  • @SebastianSimon Failed to load resource: the server responded with a status of 404 (Not Found) – Wiskani Nov 29 '21 at 03:09
  • @Wiskani Yes, but what’s the _actually requested_ URL? And what’s the actual code? Are you sure you’re using [template literals with `\``](//developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) properly? – Sebastian Simon Nov 29 '21 at 03:18
  • @SebastianSimon thanks very much work fine with slidee.style.backgroundImage = `url(${images[i]})`; – Wiskani Nov 29 '21 at 17:20

0 Answers0