2023年6月19日 03:29:22go评论71阅读模式

英文:

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

动态图片源

检查Playwright内的组件（ReactJS）中的props值

无法使用 JavaScript 中的 “document.querySelectorAll” 选择具有类 “.button” 的按钮。

这个函数为什么返回一个数字而不是另一个函数？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论