Home Changing image in Javascript isn't showing even when setting the source correctly

Questions

Changing image in Javascript isn't showing even when setting the source correctly

June 18, 2023

I put a div(imagen) inside of the div(box) and want the src of the image to change when pushing one of the buttons and show the corresponding image, but it’s only showing the alt as if the image could not be found. Sorry if some of the code isn’t related with the question but just wanted to put it all in case someone wanted to try it themselves.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cambiar colores de un DIV</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>

<body>
    <header>
        <div class="texto"><p id="titulo">Con getElementBy y querySelector podemos transformar elementos del HTML a variables en javascript y editar varios de sus atributos.</p></div>
    </header>
    <div class="reloj">
        <h1 class="hora"></h1>
        <h2 class="diaSemana"></h2>
        <h2 class="fecha"></h2>
    </div>
    <div class="medidas">
        <h3 class="alto"></h3>
        <h3>x</h3>
        <h3 class="ancho"></h3>
    </div>
    <div class="contenido">
        <section class="botones">
            <input type="button" value="rojo" id="btnrojo" onclick="setColorRojo()">
            <input type="button" value="verde" id="btnverde" onclick="setColorVerde()">
            <input type="button" value="azul" id="btnazul" onclick="setColorAzul()">
            <input type="button" value="amarillo" id="btnamarillo" onclick="setColorAmarillo()">
            <input type="button" value="morado" id="btnmorado" onclick="setColorMorado()">
            <input type="button" value="reset" id="btnreset" onclick="setColorReset()">
        </section>
        <div class="box">
            <img class="imagen" src="./styles/imgs/1.jpg" alt="Imágen cambiante">
        </div>
    </div>
    <script src="js/changecolor.js"></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background: rgb(32, 61, 37);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header {
    background-color: rgb(140, 181, 142);
    text-align: center;
}

.texto {
    font-size: 20px;
}

.contenido {
    margin-top: -65px;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.botones{
    display: flex;
    flex-direction: column;
}

input {
    width: 80px;
    height: 30px;
    background-color: rgb(191, 219, 29);
    cursor: pointer;
    outline: none;
    font-weight: bold;
    text-transform: capitalize;
    border-radius: 4px;
    margin: 10px;
}

input:hover {
    background-color: red;
    color: white;
}

input:active {
    background-color: rgb(5, 208, 5);
}

.box {
    width: 550px;
    height: 350px;
    border: 3px groove white;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen {
    height: 60%;
    width: 60%;
}

.reloj {
    margin: 15px;
    text-align: center;
}

.medidas {
    height: 65px;
    width: 150px;
    border: 1px dashed;
    display: flex;
    flex-direction: column;
    text-align: center;
}

Javascript:

let btnRojo = document.getElementById('btnrojo');
let btnVerde = document.getElementById('btnverde');
let btnAzul = document.getElementById('btnazul');
let btnAmarillo= document.getElementById('btnamarillo');
let btnMorado= document.getElementById('btnmorado');
let btnReset = document.getElementById('btnreset');
let box = document.querySelector('.box');
let imagen = document.querySelector(".imagen");
let titulo = document.querySelector("#titulo");

function setColorRojo() {
  if(btnRojo.value == "rojo") {
    box.style.background = "#FF0000";
    imagen.src = "./imgs/2.jpg";
    titulo.style.color = "red";
  }
}

function setColorVerde() {
  if(btnVerde.value == "verde") {
    box.style.background = "#00FF00";
    imagen.src = "./imgs/3.jpg";
    titulo.style.color = "green";
  }
}

function setColorAzul() {
  if(btnAzul.value == "azul") {
    box.style.background = "#0000FF";
    imagen.src = "./imgs/4.jpg";
    titulo.style.color = "blue";
  }
}

function setColorAmarillo() {
  if(btnAmarillo.value == "amarillo") {
    box.style.background = "#FFFF00";
    imagen.src = "./imgs/5.png";
    titulo.style.color = "yellow";
  }
}

function setColorMorado() {
  if(btnMorado.value == "morado") {
    box.style.background = "#842593";
    imagen.src = "./imgs/1.jpg";
    titulo.style.color = "#395248";
  }
}

function setColorReset() {
  if(btnReset.value == "reset") {
    box.style.background = "#000000";
    imagen.src = "./imgs/1.jpg";
    titulo.style.color = "black";
  }
}

let hora = document.querySelector(".hora");
setInterval(() => {
  let date = new Date();
  hora.innerText = date.toLocaleTimeString();
}, 1000);

let diaSemana = document.querySelector(".diaSemana");
let dia = new Date();
const d = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
diaSemana.innerText = d[dia.getDay()];

let fecha = document.querySelector(".fecha");
let date = new Date();
fecha.innerText = date.toLocaleDateString();

function pregunta() {
  setInterval(() => {
    if (!confirm("¿Quieres seguir en esta página?")) {
      window.location.replace = "https://www.onlinevideoconverter.vip";
    }
  }, 180000);
}

pregunta();

let alto = document.querySelector(".alto");
let ancho = document.querySelector(".ancho");
setInterval(() => {
  alto.innerText = innerHeight;
  ancho.innerText = innerWidth;
}, 1);

I tried using setAttribute, same resutls. Even tried using a div and setting the images as backgrounds but that had less results, but if you use this method and it gives good results it’s also welcomed as an answer thx.

>Solution :

your issue is simply not including styles in your JS

Here is the fixed JS

let btnRojo = document.getElementById('btnrojo');
let btnVerde = document.getElementById('btnverde');
let btnAzul = document.getElementById('btnazul');
let btnAmarillo= document.getElementById('btnamarillo');
let btnMorado= document.getElementById('btnmorado');
let btnReset = document.getElementById('btnreset');
let box = document.querySelector('.box');
let imagen = document.querySelector(".imagen");
let titulo = document.querySelector("#titulo");

function setColorRojo() {
  if(btnRojo.value == "rojo") {
    box.style.background = "#FF0000";
    imagen.src = "./styles/imgs/2.jpg";
    titulo.style.color = "red";
  }
}

function setColorVerde() {
  if(btnVerde.value == "verde") {
    box.style.background = "#00FF00";
    imagen.src = "./styles/imgs/3.jpg";
    titulo.style.color = "green";
  }
}

function setColorAzul() {
  if(btnAzul.value == "azul") {
    box.style.background = "#0000FF";
    imagen.src = "./styles/imgs/4.jpg";
    titulo.style.color = "blue";
  }
}

function setColorAmarillo() {
  if(btnAmarillo.value == "amarillo") {
    box.style.background = "#FFFF00";
    imagen.src = "./styles/imgs/5.png";
    titulo.style.color = "yellow";
  }
}

function setColorMorado() {
  if(btnMorado.value == "morado") {
    box.style.background = "#842593";
    imagen.src = "./styles/imgs/1.jpg";
    titulo.style.color = "#395248";
  }
}

function setColorReset() {
  if(btnReset.value == "reset") {
    box.style.background = "#000000";
    imagen.src = "./styles/imgs/1.jpg";
    titulo.style.color = "black";
  }
}

let hora = document.querySelector(".hora");
setInterval(() => {
  let date = new Date();
  hora.innerText = date.toLocaleTimeString();
}, 1000);

let diaSemana = document.querySelector(".diaSemana");
let dia = new Date();
const d = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
diaSemana.innerText = d[dia.getDay()];

let fecha = document.querySelector(".fecha");
let date = new Date();
fecha.innerText = date.toLocaleDateString();

function pregunta() {
  setInterval(() => {
    if (!confirm("¿Quieres seguir en esta página?")) {
      window.location.replace = "https://www.onlinevideoconverter.vip";
    }
  }, 180000);
}

pregunta();

let alto = document.querySelector(".alto");
let ancho = document.querySelector(".ancho");
setInterval(() => {
  alto.innerText = innerHeight;
  ancho.innerText = innerWidth;
}, 1);

here is a replit showing the fix: https://replit.com/@JackBaldyga/soffix?v=1