Я хочу, чтобы функция playSound() выполняла свою работу в соответствии с id выбранного (зависшего) изображения. Ничего из того, что я пробовал, не сработало, так что мне нужна полная помощь в этом.

Код:

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>
1
Sas 14 Сен 2020 в 22:41

4 ответа

Лучший ответ

Вы можете добавить this в onmouseover="playSound(this)", чтобы передать зависший элемент.

Затем вы ловите его в функции:

function playSound(e) {

И используйте для сохранения идентификатора, затем просто сделайте оператор 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>
1
ikiK 14 Сен 2020 в 19:50

Передайте событие в качестве параметра в функции playSound , связанной с тегом img с помощью onclick , и получите доступ к нему в своей логике для проверки Я бы.

< Сильный > 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();
  }
}
1
Saravan Somanchi 14 Сен 2020 в 19:54

Старайтесь не использовать встроенный JavaScript, чтобы узнать больше, не следует его использовать, просто задайте этот вопрос поэтому из-за вышесказанного просто используйте addEventListener или используйте назначение слушателя, например id.onclick = function(){}... вот

Пример

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>

Или вы также можете увидеть пример ниже, надеюсь, вы найдете его полезным

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>
1
Gad 14 Сен 2020 в 20:02

Я давно не занимаюсь сценарием, но пробовали ли вы это (я не пробовал)?

function playSound(){
document.getElementById("x").addEventListener("click", function(){ document.getElementById("audio1").play()[0]; });
document.getElementById("y").addEventListener("click", function(){ document.getElementById("audio2").play()[0]; });
}
-1
Woobie 14 Сен 2020 в 19:51