If in function according to id

Question

I want playSound() function to do its job according to the id of the chosen (hovered) image. Nothing I tried has worked even a bit, so I need full help on this one.

code:

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");

function playSound() {
  //if hovered image has id="x", do this
  sound1.play();

  //if hovered image has id="y", do this
  sound2.play();
}

<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound()" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound()" onmouseout="stop()"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>

Does this answer your question? [element id on mouse over](https://stackoverflow.com/questions/6186065/element-id-on-mouse-over) — derpirscher, Sep 14 '20 at 19:55
your HTML is wrong: your missing type="audio/wav" on your source — Jens Ingels, Sep 14 '20 at 19:56
@derpirscher Maybe somebody would get something out of it... I didn't see an answer there, but thanks — , Sep 14 '20 at 20:02
Well, the accepted answer to the referenced question shows how to get the id of the element that raised the event. and once you know the id, you know which sound you have to play. It's more or less the same, as the answer you accepted. — derpirscher, Sep 14 '20 at 20:46

score 0 · Accepted Answer · answered Sep 14 '20 at 19:50

You can add this into onmouseover="playSound(this)", that will pass a hovered element.

Then you catch it in function:

function playSound(e) {

and use to save the id, then just make if statement.

let id = e.id;

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");

function playSound(e) {
  console.clear();
  console.log(e.id);
  let id = e.id;

  if (id === "x") {
    //if hovered image has id="x", do this
    sound1.play();
     console.log("Playing sound x");
  } else if (id === "y") {
    //if hovered image has id="y", do this
    sound2.play();
    console.log("Playing sound y");
  }

}

<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(this)" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(this)" onmouseout="stop()"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>

One tip, name your parameter 'target' instead of 'e'. Just a clarity tip but it does help to separate types of functions in larger projects. — Jens Ingels, Sep 14 '20 at 22:15

Umutambyi Gad · Answer 2 · 2020-09-14T20:02:16.593

Try not to use inline JavaScript to know much more should not use it just se this question so due to the above just use an addEventListener or use listener assignment like id.onclick = function(){}... here is an

example

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");
var x = document.getElementById("x");
var y = document.getElementById("y");

x.onmouseover = () => {
  sound1.play();
}
x.onmouseout = () => {
  sound1.pause();
}
y.onmouseover = () => {
  sound2.play();
}
y.onmouseout = () => {
  sound2.pause();
}

<a href="Okokoska.html"><img src="Pkokoska.jpg"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>

Or you can see the bellow example too hope you'll find it helpful

var button = document.getElementById("button");
var audio = document.getElementById("player");

button.addEventListener("mouseover", function() {
  audio.play();
  button.innerHTML = "Play";
});
button.addEventListener("mouseout", function() {
  audio.pause();
  button.innerHTML = "Pause";
});

div {
  display: block;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background-color: #000000;
}

button {
  cursor: pointer;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 14px;
  background-color: #00ffff;
  color: blue;
  padding: 13px 6px;
}

<div>
  <button id="button">Play</button>
</div>

<audio id="player">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

score 0 · Answer 3 · answered Sep 14 '20 at 19:54

Pass event as parameter in the playSound function bound to img tag with onclick and access it in your logic to verify Id.

HTML

<a href="Okokoska.html"><img src="Pkokoska.jpg" id="x" onmouseover="playSound(event)" onmouseout="stop()"></a>
<a href="Okonj.html"><img src="Pkonj.jpg" id="y" onmouseover="playSound(event)" onmouseout="stop()"></a>

<audio id="audio1"><source src="Zkokoska.wav"></audio>
<audio id="audio2"><source src="Zkrava.wav"></audio>

JavaScript

var sound1 = document.getElementById("audio1");
var sound2 = document.getElementById("audio2");

function playSound(event) {
  if(event.target.id == "x"){
    sound1.play(); 
  }else if(event.target.id == "y"){
    sound2.play();
  }
}

score -1 · Answer 4 · answered Sep 14 '20 at 19:51

I am long not into script, but have you tried this (i didn’t tried)?

function playSound(){
document.getElementById("x").addEventListener("click", function(){ document.getElementById("audio1").play()[0]; });
document.getElementById("y").addEventListener("click", function(){ document.getElementById("audio2").play()[0]; });
}

If in function according to id

4 Answers4

example