Kimliğe göre işlevde ise

Question

playSound()İşlevin idseçilen (gezdirilmiş) görüntüye göre işini yapmasını istiyorum . Denediğim hiçbir şey biraz bile işe yaramadı, bu yüzden bu konuda tam yardıma ihtiyacım var.

kod:

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

Ekleyebilir thisiçine onmouseover="playSound(this)"bir süpürdü eleman geçecek.

Sonra onu işlevde yakalarsınız:

function playSound(e) {

ve kimliği kaydetmek için kullanın, sonra sadece if ifadesini oluşturun.

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

Geçiş olay içinde parametre olarak PlaySound bağlı fonksiyonu img etiketinin veya onclick Id doğrulamak için mantığında ve erişim onu.

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

Daha fazlasını öğrenmek için satır içi JavaScript'i kullanmamaya çalışın, sadece bu soruyu kullanmamalısınız, bu nedenle yukarıdakilerden dolayı sadece bir addEventListenerdinleyici ataması kullanın veya id.onclick = function(){}...burada

misal

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>

Ya da aşağıdaki örneği görebilirsin, umarım yararlı bulursun

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>