Develop Reference

Play all audio elements on a HTML page using Javascript

So I have a button that you can click to play every single audio element on the page, but they way it does it is not very good, it uses getElementById for every single element. My page has many audio elements and more are getting added, so I want to get this over with before this problem gets out of hand.
document.getElementById("sound1").play();
document.getElementById("sound2").play();
document.getElementById("sound3").play();
document.getElementById("sound4").play();
document.getElementById("sound5").play();
document.getElementById("sound6").play();
// more code here: https://github.com/3kh0/3kh0.github.io/blob/main/projects/soundboard/index.html
I can use jQuery, but I am trying not to, so a plain JavaScript solution would be nice.

As per your question of targeting all audio elements on a page, the following code will do that for you :
// create a HTMLCollection of audio elements in constant els
const els = document.getElementsByTagName("AUDIO");
// use Array.from() method to convert els to array,
// then iterate over it
Array.from(els).forEach((el) => {
el.play();
});
The same functionality could also be used to only play select groups of audio elements. One could use class names for this purpose, or data-attributes.
For example, all audio elements created like this ...
<audio controls class="group-one" data-group="one">
<source src="file.mp3" type="audio/mpeg">
</audio>
... could then be added to the HTMLCollection (in the case of getElementsByClassName) or NodeList (when using querySelectorAll) like this ...
const els = document.getElementsByClassName("group-one");
// OR
const els = document.querySelectorAll('audio[data-group="one"]');

src vs href on img tag IE

I have run into an issue IE 8 and IE 11 is treating src and href as the same thing for img tags -
http://codepen.io/anon/pen/YXqzrV
<img id="logo" alt="Rent.com" src="http://rent.qa.assets.rentpathcdn.com/assets/rent-logo-eb029594.png">
var a = document.getElementById('logo');
alert(a.src);
alert(a.href);
this occurs when I do not have an href attribute specified for img node, just a src.
I'm writing a custom extension that collects information about a clicked node.
is there a potential work around for this issue, or will I have to code around the non existent attributes?

IE does not support href in img HTML elements.
The img element does not support the HREF content attribute. In addition, the href property is read-only for the img Document Object Model (DOM) object.
https://msdn.microsoft.com/en-us/library/cc848861(v=vs.85).aspx
I would stick to what #Frederic mentioned above and use a.getAttribute('href') instead.

JavaScript onchange attr event for img

No jQuery, just JavaScript. I'm using prototype.js but can't find in documentation how can I do that.
I have the img element, and some event that change attr src, so my code is:
document.getElementById('image').addEventListener('change', myFunction(), false);
but this solution doesn't work with img element!

You can't use change event for img tag.
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
So try like this whenever a image is changed, it will be loaded, so bind it using load event.

I too am trying to move an old-IE solution using img onchange, which used to detect change to image's src attribute just fine.
However, the load event solution here (and similarly in Detect a img src change), while great for detecting change to a new image, unfortunately does not fire if you are setting src='' [EDIT: HTML5 does not allow empty, I have changed to use src='data:null'] (I guess because there is no image to load). This is a genuine case for me (user can pick "no image"), and I still want to change attributes like alt & title. Just a heads-up for anyone else.

<object> tag with svg and (double)click events

I have some object tags that each embeds a svg file.
Clicking on the object tag (the svg), should call a javascript function. As I understand, the object tag doesn't support mouse events.
I have read of dousins solutions with object & flash, but they don't work with svg.
It is not a solution to code something in the svg file.

You could perhaps use an <img> tag instead, if you don't need scripting and interactivity inside the svg file.
It's like Robert Longson says, the mouse events go into the <object> tag, so you'll need to put your event handlers in the svg instead (you can do this with script, and without needing to modify the original svg file). Here's an example of how to access the DOM of the svg from the html that references it.
To clarify:
get the root svg element (see the example)
call rootsvg.addEventListener("click", window.parent.yourFunctionHere, false) (assuming yourFunctionHere is a function defined in a script in the main html document)

You CAN use an img tag, and still edit an SVG using the document model. All it takes is a bit of thought. I have been working on a similar problem, where svg text needed to be editable, and so I needed a mouseclick to activate the editing.
If you want your SVGs to be clickable, the object tag is NOT the way to go. It reroutes all the events to its content, and placing a transparent div on top of it is not possible, as the object automatically becomes the top item, so that the object you are embedding can always receive the mouse events. (think flash video player).
What you can do is convert your svgs using the XMLSerializer and createObjectURL into blobs, which can then be displayed as img tags, using the following, where mysvg is an SVG which has been loaded and parsed as an xml document with xhttp :
var mysvg = xhttp.responseXML;
var xml2str = new XMLSerializer();
var svg_blob = new Blob([xml2str.serializeToString(mysvg)],{'type': "image/svg+xml"});
var url = URL.createObjectURL(svg_blob);
document.getElementById("svg1").src = url;
svg1 is an img tag, which will happily take any event handlers you wish to use.

mouse events go to the contents of the <object> tag.
You're going to need to put some other tag like an absolutely positioned transparent <div> in front of the <object> tag and use that to catch mouse events.
Alternatively you could set the contents of the <object> tag to be pointer-events="none" so that they don't handle events, at which point you can handle them in the <object> tag.

Change the content of a <td> using Prototype?

I have this table cell:
<td align="left">
<img title="some title" src="image url">
</td>
I want to change the src (image url) but don't know how. Is that possible using Prototype or/and innerhtml or something? Do I need to give an id to the <td>?

Simply select the element using Prototype’s $ method and change its src property:
$('image').src = 'new-image.png';
If you have more than one image in the document, I’d suggest adding a class or ID to the image or the containing <td> element.

I don't know prototype, but there is a CSS selector for attributes that looks like
.img[title="some title"]
In jquery where you have sizzle, that can be used, not sure about prototype.

You'll need to obtain a reference to the specific node element in the DOM.
There are a number of ways to do this, you could reference the img by id. You could loop over elements in the DOM (either rows/columns in your table, or across all img tags, etc.)
From there it's a simple reassignment of the src attribute. Note: when you swap the src attribute of the img element it may not load immediately and may look unpleasant particularly for mouseover or button effects. (After the initial load it may be cached by the browser and no longer be noticeable).
The suggested route is to pre-load such images for example:
var myImg = new Image();
myImg.src = "newimage.jpg";
Then you would set the node reference's src attribute to myImg.src.