Question 246485 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Check an element to see if it contains an image. If so, play a sound. Play a different sound if no image

I have a table of records, some of those records will have an image in a <td> element.

If that element does NOT contain an image I want to play the default sound, but if an image exists in the element play a different sound.
Here is what I have tried, but it doesn’t work, it just plays the default sound.

the result was, it only plays the default sound even though there is an image in some of the other element.

function play_alert_audio() {
  var audio_element = document.getElementById("alert_audio");
  var tab_element = document.getElementById("record");

  for (i = 0; i <= tab_element.childNodes.length - 1; i++) {
    // check if the element is an IMG (image type).
    if (tab_element.childNodes[i].tagName == 'IMG') {
      var audio_element = document.getElementById("alert_audio1");
    }
  }

  if (audio_element.paused) {
    audio_element.play();
  }
}
<table>
  <tr>
    <td>Record 1:</td>
    <td id='record' onclick='play_alert_audio()'><img src='record.jpg'></td>
  </tr>
  <tr>
    <td>Record 2:</td>
    <td id='record' onclick='play_alert_audio()'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 3:</td>
    <td id='record' onclick='play_alert_audio()'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 4:</td>
    <td id='record' onclick='play_alert_audio()'><img src='record.jpg'></td>
  </tr>
</table>
<audio id="alert_audio" src="alert.mp3" type="audio/mpeg" loop="loop"></audio>
<audio id="alert_audio1" src="marimba.wav" type="audio/wav" loop="loop"></audio>
Tags:

2

Answers


  1. 0

    There are some basic programming issues in your code.

    1. first, you are incorrectly redeclaring local variables in your code.

    just need to remove var as the below code

    
  var audio_element = document.getElementById("alert_audio");
  var tab_element = document.getElementById("record");
  for (i = 0; i <= tab_element.childNodes.length - 1; i++) {
    if (tab_element.childNodes[i].tagName == 'IMG') {
      // ⚠️ use `var` here will change the scope of the `audio_element`
      audio_element = document.getElementById("alert_audio1");
    }
  }
  // ...
    1. second you have many duplicate ids for the tr element.

    You should use a unique id for each tr element and pass them to your click callback function.

    <table>
  <tr>
    <td>Record 1:</td>
    <td id='record' onclick='play_alert_audio(`record`)'><img src='record.jpg'></td>
  </tr>
  <tr>
    <td>Record 2:</td>
    <td id='record2' onclick='play_alert_audio(`record2`)'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 3:</td>
    <td id='record3' onclick='play_alert_audio(`record3`)'>Text Only here</td>
  </tr>
  <tr>
    <td>Record 4:</td>
    <td id='record4' onclick='play_alert_audio(`record4`)'><img src='record.jpg'></td>
  </tr>
</table>


    // unique id
function play_alert_audio(id) {
  var audio_element = document.getElementById("alert_audio");
  var tab_element = document.getElementById(id);
  for (i = 0; i <= tab_element.childNodes.length - 1; i++) {
    if (tab_element.childNodes[i].tagName == 'IMG') {
      audio_element = document.getElementById("alert_audio1");
    }
  }
  if (audio_element.paused){
    audio_element.play();
  }
}
    Login or Signup to reply.
  2. 0

    If you delegate you can just use relative addressing

    I changed ID to class and added a tbody with an ID instead

    window.addEventListener('DOMContentLoaded', () => {
  const audio_element1 = document.getElementById('alert_audio');
  const audio_element2 = document.getElementById('alert_audio1');
  document.getElementById('recordBody').addEventListener('click', (e) => {
    const tgt = e.target.closest('td.record');
    if (!tgt) return;
    let audio_element = tgt.closest('tr').querySelector('img') ? audio_element1 : audio_element2;
    console.log(audio_element)
    if (audio_element.paused) {
      audio_element.play();
    }
  });
});
    <table>
  <tbody id="recordBody">
    <tr>
      <td>Record 1:</td>
      <td class="record"><img src="record.jpg"></td>
    </tr>
    <tr>
      <td>Record 2:</td>
      <td class="record">Text Only here</td>
    </tr>
    <tr>
      <td>Record 3:</td>
      <td class="record">Text Only here</td>
    </tr>
    <tr>
      <td>Record 4:</td>
      <td class="record"><img src="record.jpg"></td>
    </tr>
  </tbody>
</table>
<audio id="alert_audio" src="alert.mp3" type="audio/mpeg" loop="loop</audio">
<audio id="alert_audio1" src="marimba.wav" type="audio/wav" loop="loop"></audio>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search