Se in funzione secondo id

Question

Voglio che la playSound()funzione faccia il suo lavoro in base idall'immagine scelta (al passaggio del mouse). Niente di ciò che ho provato ha funzionato nemmeno un po ', quindi ho bisogno di aiuto completo su questo.

codice:

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

È possibile aggiungere thisin onmouseover="playSound(this)", che passerà un elemento aleggiava.

Quindi lo prendi in funzione:

function playSound(e) {

e usa per salvare l'id, quindi fai semplicemente l'istruzione 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

Passa l' evento come parametro nella funzione playSound associata al tag img con onclick e accedi ad esso nella tua logica per verificare l'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

Cerca di non usare JavaScript in linea per saperne di più, non dovresti usarlo solo per questa domanda quindi, a causa di quanto sopra, usa semplicemente un addEventListenero usa l'assegnazione dell'ascoltatore come id.onclick = function(){}...qui è un

esempio

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>

Oppure puoi vedere anche l'esempio qui sotto, spero che lo troverai utile

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>