0
248
Visualizações¿Cómo cambio la fuente de una imagen a través de JavaScript?
Entonces, en este momento, tengo este código, que tiene una imagen de voto positivo y negativo (img/upvote.png e img/downvote.png) y cuando se hace clic en ellos, deben cambiar la fuente a img/orangeupvote.png, y downvote a orangedownvote.png (que también son ambas imágenes en el directorio de la carpeta img). Entonces, para esto tengo este código:
<div style="position: fixed; margin-left: 1030px; margin-top: 235px"> <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer"> <img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 120px; margin-top: -12px; position: fixed; cursor: pointer"> </div> <script type="text/javascript"> function changetextUpvote() { var textUpvoteImg = document.getElementById('textUpvoteImg'); if (textUpvoteImg.src.match("orangedownvote")) { textUpvoteImg.src = "img/upvote.png"; } else { textUpvoteImg.src = "img/orangedownvote.png"; } } function changetextDownvote() { var textDownvoteImg = document.getElementById('textDownvoteImg'); if (textDownvoteImg.src.match("orangeupvote")) { textDownvoteImg.src = "img/downvote.png"; } else { textDownvoteImg.src = "img/orangeupvote.png"; } } </script>Entonces, cuando pruebo esto en un documento diferente, funciona. Las imágenes de voto positivo y negativo están cambiando con éxito a sus versiones naranjas (orangeupvote.png y orangedownvote.png), al hacer clic. Sin embargo, cuando pruebo esto en mi documento actual, no funciona. Incluso inspeccioné, y al hacer clic, no está cambiando la fuente, pero luego para cualquier otra imagen (cualquier cosa que no sea orangeupvote.png o orangedownvote.png) está funcionando. Si se especifica cualquier otra imagen al hacer clic, está funcionando, pero orangeupvote.png y orangedownvote.png no funcionan.
EDITAR:
Cuando hago clic en el botón de voto a favor, muestra tanto el voto negativo naranja como el voto positivo al mismo tiempo. Esto no debería pasar. Solo debería mostrar un voto negativo naranja. (En realidad voto a favor naranja, pero estoy haciendo esto para probar). De manera similar, con el botón de voto negativo, cuando se hace clic en él, debería mostrar solo un voto positivo de color naranja, pero muestra un voto positivo y negativo de color naranja al mismo tiempo. Aquí una imagen para mayor claridad:
Imagen de lo que está ocurriendo:
1 Respostas
Responde à pergunta0
Para escribir JavaScript moderno, debe definir Event-Listeners con addEventLisener:
Además, no debe pasar una llamada de función al atributo onclick , sino solo la referencia de la función, que debe ejecutarse al hacer clic.
Correcto: onclick="changetextUpvote"
No estoy seguro de si las declaraciones if dentro del Controlador de String.prototype.includes hacen lo que deberían . US/docs/Web/JavaScript/Reference/Global_Objects/String/includes ).
EDITAR: los detectores de eventos no verifican la fuente de img actual. Simplemente cambian el src a la imagen/png deseada después de hacer clic.
<div style="position: fixed; margin-left: 1030px; margin-top: 235px"> <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" style="width: 100px; margin-bottom: 28px; cursor: pointer"> <img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" style="width: 120px; margin-top: -12px; position: fixed; cursor: pointer"> </div> <script type="text/javascript"> var textUpvoteImg = document.getElementById('textUpvoteImg'); var textDownvoteImg = document.getElementById('textDownvoteImg'); function changetextUpvote() { // removed if-else statement here textUpvoteImg.src = "img/orangedownvote.png"; } function changetextDownvote() { // removed if-else statement here textDownvoteImg.src = "img/orangeupvote.png"; } // Only pass the function name, not the function call (eg not changetextUpvote()) textUpvoteImg.addEventListener('click', changetextUpvote); textDownvoteImg.addEventListener('click', changetextDownvote); </script>