Si en función según id

Question

Quiero que la playSound()función haga su trabajo de acuerdo con idla imagen elegida (suspendida). Nada de lo que probé ha funcionado ni siquiera un poco, así que necesito ayuda completa en este caso.

código:

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>

Answer 1

Se pueden añadir thisa onmouseover="playSound(this)", que pasará un elemento mantenido.

Entonces lo atrapas en función:

function playSound(e) {

y use para guardar la identificación, luego haga la declaración if.

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>

Answer 2

Pase el evento como parámetro en la función playSound vinculada a la etiqueta img con onclick y acceda a él en su lógica para verificar 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();
  }
}

Answer 3

Trate de no usar JavaScript en línea a saber mucho más no debe usarlo sólo SE de esta pregunta de manera debido a lo anterior sólo tiene que utilizar una addEventListenero uso asignación oyente como id.onclick = function(){}...aquí es una

ejemplo

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>

O también puede ver el siguiente ejemplo, espero que lo encuentre útil

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>