Can JavaScript function trigger only when specific HTML <element> exist eliminating the need of unique ID tags?

Question

Unlike questions based on (unique) id's and name's, this targets name-less and id-less elements!

I would like to load the JavaScript function called audio() only when an <audio> element is present on the HTML page.
If there is such an HTML element, then there would be only 1 instance of this <audio> element on the entire HTML page.

At the moment I'm selecting a unique id (audio) which works.

I wonder however, would it be possible to omit the id="audio" and just let the if statement trigger on the very existence of the <audio> html element on the page. If yess, then what if-statement would safely trigger a positive when such an <audio> HTML-element exist?

JS

if (document.getElementById("audio") !== null){
    window.onload = audio();
}

HTML

<audio id="audio" src="/audiofile.mp3" type="audio/mpeg" preload="none"></audio>

Use document.querySelector('audio') which selects the first audio element on the page. Note that you are currently passing the returned value of the audio function as the onload handler. Set it without calling it yourself! — Ram
– Ram, Commented May 20, 2022 at 22:33
Conditionally adding functions like this seems like a pretty strange thing to want to do. Can you clarify why you believe this is the best solution for whatever problem you're facing? — ggorlen
– ggorlen, Commented May 20, 2022 at 22:36
Agree with Ram. To clarify, what you do is call audio(), and whatever that returns is then put into window.onload. This only makes sense if audio() returns a function object. — Peter B
– Peter B, Commented May 20, 2022 at 22:41
@ggorlen Ram and Peter B Thank you for your comments. Reasing being that when the first line of HTML (containting <audio>) is removed in this example jsfiddle.net/c8zdfhpy then an error occurs: "Uncaught TypeError: Cannot read properties of undefined (reading 'paused')". By adding the if statement, I thought the javascript audio(); function would run "only if" such an <audio> element exist on a page. — Sam
– Sam, Commented May 22, 2022 at 10:15
Does this answer your question? JavaScript get element by name — Heretic Monkey
– Heretic Monkey, Commented May 22, 2022 at 16:05

Nimarel · Accepted Answer · 2022-05-20 22:33:21Z

1

if (document.getElementsByTagName("audio").length !== 0){
  window.onload = audio();
}

Should do the work.

From: https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByTagName

answered May 20, 2022 at 22:33

Nimarel

3172 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

Excellent thank you. This solved the problem! The element got selected even without any (unique) id's!

Collectives™ on Stack Overflow

Can JavaScript function trigger only when specific HTML <element> exist eliminating the need of unique ID tags?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related