在JavaScript中更改图像时，即使正确设置了源，图像也不显示。

huangapple
go评论58阅读模式
英文:

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

问题

HTML：

我将一个div（imagen）放在另一个div（box）中，并希望在按下其中一个按钮时更改图像的src，并显示相应的图像，但它只显示alt，就像找不到图像一样。如果某些代码与问题无关，我很抱歉，只是想将它们全部放在一起，以便有人想尝试自己编写代码。

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>Change DIV Colors</title>
    <link rel="stylesheet" href="./styles/styles.css">
</head>

<body>
    <header>
        <div class="text"><p id="title">With getElementBy and querySelector, we can turn HTML elements into JavaScript variables and edit various attributes.</p></div>
    </header>
    <div class="clock">
        <h1 class="time"></h1>
        <h2 class="dayOfWeek"></h2>
        <h2 class="date"></h2>
    </div>
    <div class="dimensions">
        <h3 class="height"></h3>
        <h3>x</h3>
        <h3 class="width"></h3>
    </div>
    <div class="content">
        <section class="buttons">
            <input type="button" value="red" id="btnRed" onclick="setColorRed()">
            <input type="button" value="green" id="btnGreen" onclick="setColorGreen()">
            <input type="button" value="blue" id="btnBlue" onclick="setColorBlue()">
            <input type="button" value="yellow" id="btnYellow" onclick="setColorYellow()">
            <input type="button" value="purple" id="btnPurple" onclick="setColorPurple()">
            <input type="button" value="reset" id="btnReset" onclick="setColorReset()">
        </section>
        <div class="box">
            <img class="image" src="./styles/imgs/1.jpg" alt="Changing Image">
        </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;
}

.text {
    font-size: 20px;
}

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

.buttons {
    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;
}

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

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

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

JavaScript：

let btnRed = document.getElementById('btnRed');
let btnGreen = document.getElementById('btnGreen');
let btnBlue = document.getElementById('btnBlue');
let btnYellow = document.getElementById('btnYellow');
let btnPurple = document.getElementById('btnPurple');
let btnReset = document.getElementById('btnReset');
let box = document.querySelector('.box');
let image = document.querySelector(".image");
let title = document.querySelector("#title");

function setColorRed() {
  if(btnRed.value == "red") {
    box.style.background = "#FF0000";
    image.src = "./imgs/2.jpg";
    title.style.color = "red";
  }
}

function setColorGreen() {
  if(btnGreen.value == "green") {
    box.style.background = "#00FF00";
    image.src = "./imgs/3.jpg";
    title.style.color = "green";
  }
}

function setColorBlue() {
  if(btnBlue.value == "blue") {
    box.style.background = "#0000FF";
    image.src = "./imgs/4.jpg";
    title.style.color = "blue";
  }
}

function setColorYellow() {
  if(btnYellow.value == "yellow") {
    box.style.background = "#FFFF00";
    image.src = "./imgs/5.png";
    title.style.color = "yellow";
  }
}

function setColorPurple() {
  if(btnPurple.value == "purple") {
    box.style.background = "#842593";
    image.src = "./imgs/1.jpg";
    title.style.color = "#395248";
  }
}

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

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

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

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

function ask() {
  setInterval(() => {
    if (!confirm("Do you want to stay on this page?")) {
      window.location.href = "https://www.onlinevideoconverter.vip";
    }
  }, 180000);
}

ask();

let height = document.querySelector(".height");
let width = document.querySelector(".width");
setInterval(() => {
  height.innerText = innerHeight;
  width.innerText = innerWidth;
}, 1);
英文:

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:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
&lt;title&gt;Cambiar colores de un DIV&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;./styles/styles.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;div class=&quot;texto&quot;&gt;&lt;p id=&quot;titulo&quot;&gt;Con getElementBy y querySelector podemos transformar elementos del HTML a variables en javascript y editar varios de sus atributos.&lt;/p&gt;&lt;/div&gt;
&lt;/header&gt;
&lt;div class=&quot;reloj&quot;&gt;
&lt;h1 class=&quot;hora&quot;&gt;&lt;/h1&gt;
&lt;h2 class=&quot;diaSemana&quot;&gt;&lt;/h2&gt;
&lt;h2 class=&quot;fecha&quot;&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;medidas&quot;&gt;
&lt;h3 class=&quot;alto&quot;&gt;&lt;/h3&gt;
&lt;h3&gt;x&lt;/h3&gt;
&lt;h3 class=&quot;ancho&quot;&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;contenido&quot;&gt;
&lt;section class=&quot;botones&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;rojo&quot; id=&quot;btnrojo&quot; onclick=&quot;setColorRojo()&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;verde&quot; id=&quot;btnverde&quot; onclick=&quot;setColorVerde()&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;azul&quot; id=&quot;btnazul&quot; onclick=&quot;setColorAzul()&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;amarillo&quot; id=&quot;btnamarillo&quot; onclick=&quot;setColorAmarillo()&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;morado&quot; id=&quot;btnmorado&quot; onclick=&quot;setColorMorado()&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;reset&quot; id=&quot;btnreset&quot; onclick=&quot;setColorReset()&quot;&gt;
&lt;/section&gt;
&lt;div class=&quot;box&quot;&gt;
&lt;img class=&quot;imagen&quot; src=&quot;./styles/imgs/1.jpg&quot; alt=&quot;Im&#225;gen cambiante&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;js/changecolor.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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(&#39;btnrojo&#39;);
let btnVerde = document.getElementById(&#39;btnverde&#39;);
let btnAzul = document.getElementById(&#39;btnazul&#39;);
let btnAmarillo= document.getElementById(&#39;btnamarillo&#39;);
let btnMorado= document.getElementById(&#39;btnmorado&#39;);
let btnReset = document.getElementById(&#39;btnreset&#39;);
let box = document.querySelector(&#39;.box&#39;);
let imagen = document.querySelector(&quot;.imagen&quot;);
let titulo = document.querySelector(&quot;#titulo&quot;);
function setColorRojo() {
if(btnRojo.value == &quot;rojo&quot;) {
box.style.background = &quot;#FF0000&quot;;
imagen.src = &quot;./imgs/2.jpg&quot;;
titulo.style.color = &quot;red&quot;;
}
}
function setColorVerde() {
if(btnVerde.value == &quot;verde&quot;) {
box.style.background = &quot;#00FF00&quot;;
imagen.src = &quot;./imgs/3.jpg&quot;;
titulo.style.color = &quot;green&quot;;
}
}
function setColorAzul() {
if(btnAzul.value == &quot;azul&quot;) {
box.style.background = &quot;#0000FF&quot;;
imagen.src = &quot;./imgs/4.jpg&quot;;
titulo.style.color = &quot;blue&quot;;
}
}
function setColorAmarillo() {
if(btnAmarillo.value == &quot;amarillo&quot;) {
box.style.background = &quot;#FFFF00&quot;;
imagen.src = &quot;./imgs/5.png&quot;;
titulo.style.color = &quot;yellow&quot;;
}
}
function setColorMorado() {
if(btnMorado.value == &quot;morado&quot;) {
box.style.background = &quot;#842593&quot;;
imagen.src = &quot;./imgs/1.jpg&quot;;
titulo.style.color = &quot;#395248&quot;;
}
}
function setColorReset() {
if(btnReset.value == &quot;reset&quot;) {
box.style.background = &quot;#000000&quot;;
imagen.src = &quot;./imgs/1.jpg&quot;;
titulo.style.color = &quot;black&quot;;
}
}
let hora = document.querySelector(&quot;.hora&quot;);
setInterval(() =&gt; {
let date = new Date();
hora.innerText = date.toLocaleTimeString();
}, 1000);
let diaSemana = document.querySelector(&quot;.diaSemana&quot;);
let dia = new Date();
const d = [&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;];
diaSemana.innerText = d[dia.getDay()];
let fecha = document.querySelector(&quot;.fecha&quot;);
let date = new Date();
fecha.innerText = date.toLocaleDateString();
function pregunta() {
setInterval(() =&gt; {
if (!confirm(&quot;&#191;Quieres seguir en esta p&#225;gina?&quot;)) {
window.location.replace = &quot;https://www.onlinevideoconverter.vip&quot;;
}
}, 180000);
}
pregunta();
let alto = document.querySelector(&quot;.alto&quot;);
let ancho = document.querySelector(&quot;.ancho&quot;);
setInterval(() =&gt; {
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.

答案1

得分: 0

您的问题仅在于未在JavaScript中包含样式。

以下是已修复的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 = "./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);

这是一个显示修复的Replit链接：https://replit.com/@JackBaldyga/soffix?v=1

英文:

your issue is simply not including styles in your JS

Here is the fixed JS

let btnRojo = document.getElementById(&#39;btnrojo&#39;);
let btnVerde = document.getElementById(&#39;btnverde&#39;);
let btnAzul = document.getElementById(&#39;btnazul&#39;);
let btnAmarillo= document.getElementById(&#39;btnamarillo&#39;);
let btnMorado= document.getElementById(&#39;btnmorado&#39;);
let btnReset = document.getElementById(&#39;btnreset&#39;);
let box = document.querySelector(&#39;.box&#39;);
let imagen = document.querySelector(&quot;.imagen&quot;);
let titulo = document.querySelector(&quot;#titulo&quot;);
function setColorRojo() {
if(btnRojo.value == &quot;rojo&quot;) {
box.style.background = &quot;#FF0000&quot;;
imagen.src = &quot;./styles/imgs/2.jpg&quot;;
titulo.style.color = &quot;red&quot;;
}
}
function setColorVerde() {
if(btnVerde.value == &quot;verde&quot;) {
box.style.background = &quot;#00FF00&quot;;
imagen.src = &quot;./styles/imgs/3.jpg&quot;;
titulo.style.color = &quot;green&quot;;
}
}
function setColorAzul() {
if(btnAzul.value == &quot;azul&quot;) {
box.style.background = &quot;#0000FF&quot;;
imagen.src = &quot;./styles/imgs/4.jpg&quot;;
titulo.style.color = &quot;blue&quot;;
}
}
function setColorAmarillo() {
if(btnAmarillo.value == &quot;amarillo&quot;) {
box.style.background = &quot;#FFFF00&quot;;
imagen.src = &quot;./styles/imgs/5.png&quot;;
titulo.style.color = &quot;yellow&quot;;
}
}
function setColorMorado() {
if(btnMorado.value == &quot;morado&quot;) {
box.style.background = &quot;#842593&quot;;
imagen.src = &quot;./styles/imgs/1.jpg&quot;;
titulo.style.color = &quot;#395248&quot;;
}
}
function setColorReset() {
if(btnReset.value == &quot;reset&quot;) {
box.style.background = &quot;#000000&quot;;
imagen.src = &quot;./styles/imgs/1.jpg&quot;;
titulo.style.color = &quot;black&quot;;
}
}
let hora = document.querySelector(&quot;.hora&quot;);
setInterval(() =&gt; {
let date = new Date();
hora.innerText = date.toLocaleTimeString();
}, 1000);
let diaSemana = document.querySelector(&quot;.diaSemana&quot;);
let dia = new Date();
const d = [&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;];
diaSemana.innerText = d[dia.getDay()];
let fecha = document.querySelector(&quot;.fecha&quot;);
let date = new Date();
fecha.innerText = date.toLocaleDateString();
function pregunta() {
setInterval(() =&gt; {
if (!confirm(&quot;&#191;Quieres seguir en esta p&#225;gina?&quot;)) {
window.location.replace = &quot;https://www.onlinevideoconverter.vip&quot;;
}
}, 180000);
}
pregunta();
let alto = document.querySelector(&quot;.alto&quot;);
let ancho = document.querySelector(&quot;.ancho&quot;);
setInterval(() =&gt; {
alto.innerText = innerHeight;
ancho.innerText = innerWidth;
}, 1);

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

huangapple
  • 本文由 发表于 2023年6月19日 03:29:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76502223.html
  • button
  • image
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定