Image in Javascript does not appear

Asked

Viewed 860 times

1

Why aren’t the images showing when I click the button? I called them via Javascript, it is part of a button that serves to mutate and dismount my video. When I click does not appear the images, follows the code.

HTML:

<div id="buttonbar">
     <button id="volDn"><img src="images/video/menos.png" id="menos"/></button>
     <button id="volUp"><img src="images/video/mais.png" id="btn-mais"/></button>
     <button id="mute"><img src="images/video/som.png" id="btn-mudo"/></button>
</div>

Javascript:

function init() {
var video = document.getElementById("Video1");
if (video.canPlayType) {
    document.getElementById("buttonbar").style.display = "inline";

    function setVol(value) {
        var vol = video.volume;
        vol += value;
        if (vol >= 0 && vol <= 1) {
            video.volume = vol;
        } else {

            video.volume = (vol < 0) ? 0 : 1;
        }
    }
    document.getElementById("volDn").addEventListener("click", function () {
        setVol(-.1); // down by 10%
    }, false);

    document.getElementById("volUp").addEventListener("click", function () {
        setVol(.1);  // up by 10%
    }, false);

    document.getElementById("mute").addEventListener("click", function (evt) {
        if (video.muted) {
            video.muted = false;
            evt.target.innerHTML = "<img alt='volume on button' src='../images/video/mutado.png' />"
        } else {
            video.muted = true;
            evt.target.innerHTML = "<img alt='volume off button' src='../images/video/desmutado.png' />"
        }
    }, false);
}
            video.muted = true;
}
javascript html5

1 answer

2

The image paths in js are relative, different from the ones in HTML.

I believe that changing:

<img alt='volume on button' src='../images/video/mutado.png' id='js-imagem' />

To:

<img alt='volume on button' src='images/video/mutado.png' id='js-imagem' />

Solves the problem.

  • it features normally worked but when I click back the image it was before does not return

  • 2

    will q is not pq ta using the "dismount" instead of "sound"?

  • then and that and so these two images are one for the sound dismayed and one with the sound mutated more there so I made the code that you posted and it worked but when I click back the button does not come back is in the dismounted and wanted that when you click also turns to the mutated. Briefly I click it changes but if I click again it does not return to the pattern of before

  • That’s what @Michelsimões said, you’re using the file images/video/desmutado.png or instead of images/video/som.png

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.