Develop Reference

Clicking all elements by getting class

I have clicked countless of stackoverflow links similar to my question, but none of the answers is working for me.
https://soundoftext.com/
This site. I'm trying to download several audios at once by pressing each individual download button. Trying to do this in the console for chrome.
$( ".card__actions a:contains('Download')" ).each(function( index ) {
$(this).click();
});
^This seems to return an array. r.fn.init(X) ... 
buttons = document.getElementsByClassName('card__action');
for(var i = 0; i < buttons.length; i++)
buttons[i].click();
^I tried this too but then it only wants press the last card__action element.
This is probably super stupid and obvious but I cannot for the life of me figure it out. halp

Creator of Sound of Text here. I think you may have emailed me? 😛
Any way, here is the javascript that works for me in Chrome. It opens a new tab for each mp3 file:
$('.sounds.grid').querySelectorAll('a[download]').forEach(a => window.open(a.href))

Try creating new links and clicking them
buttons = document.getElementsByClassName('card__action')
function downloadURI(uri, name)
{
var link = document.createElement("a")
link.download = name
link.href = uri
setTimeout(()=>{
link.click()
},50)
}
for (let i=0;i<buttons.length; i++) {
if (buttons[i].textContent=='Download')
setTimeout(()=>{
console.log(`dispatched, ${i}, ${buttons[i].href}`)
downloadURI(buttons[i].href,buttons[i].href)
},(i+1)*450)
}

Javascript only working in Chrome browser not in Firefox

So I have a table and I have to populate a modal using the data from the Table I have written following code
Javascript
var tableHeaders = JSON.parse('["name","phone","email","message"]');
console.log(tableHeaders) ;
$('.openUpdateform').on('click', function() {
$('#callApi').hide();
$('#updateData').show();
tr = $(this).parent().parent().parent().parent();
console.log(tr.children());
for (var i = 1; i < tr.children().length - 1; i++) {
j = i - 1;
$('#' + tableHeaders[j]).val(tr.children()[i].outerText);
}
$('#data_row_id').val($(this).data('row_id'));
$('#createWF').modal();
})
JSFIDDLE
SO the above code works perfectly on Chrome but not in Mozilla Firefox any suggestions appreciated .
Not Working
Means from the Action DropDown if you select the Edit Data option it will open a popup and that popup gets filled in Chrome but not Firefox.
Thanks

the problem is that Firefox doesn't support Node.outerText. Use Node.innerText instead and you'll be all right.

You must use "innerText" instead of "outerText".
https://developer.mozilla.org/es/docs/Web/API/HTMLElement/outerText

how set style display in opera?

I have this html code for my button:
Click
and this javascript code for set display style the button:
function setstyleint()
{
var divArray = document.getElementById('processLink');
divArray.style.display = 'initial';
}
it work in ff and chrome very good.
but in opera and ie(my version is 9) do not work,
is there any help?
best regards.

Try divArray.style.display = '';
insted of divArray.style.display = 'initial';
also commented by epascarello

Why doesn't the JavaScript work for Firefox/Chrome but for IE?

I've written a simple JavaScript to add options to an HTML Select element, the code looks like this:
function addOption() {
var newOption = document.createElement('<option value="TOYOTA">');
var elSel = document.getElementById('mySelect');
try{
elSel.add(newOption,null);
} //Standard
catch(ex)
{elSel.add(newOption);
} //IE Only
newOption.innerText = "Toyota";
}
I found online tutorial that shows we need to do something like this to get both Firefox/Chrome and IE work. However, currently only IE will work, for FF/Chrome, when I click on the "Add" button, nothing is added to the dropdown, could anybody help? Thanks in advance.

You are supposed to specify the node name, not an HTML string ala jQuery style to createElement afaik.
var el = document.createElement('option')
, fc = document.createTextNode('blah')
, s = document.getElementById('foo');
el.value = 'blah';
el.appendChild( fc );
s.appendChild( el )

I'm surprised that even works in IE.
Try replacing everything inside the function with this:
var newOption = document.createElement("option");
newOption.setAttribute("value", "TOYOTA");
newOption.appendChild(document.createTextNode("My toyota"));
var elSel = document.getElementById('mySelect');
elSel.appendChild(newOption)

If you're going to do a lot of UI manipulation, I suggest using a 3rd party library like jQuery to make this easier and more cross-browser compatible.
$('#mySelect').
append($("<option value='TOYOTA'>TOYOTA</option>").
attr("value",'TOYOTA').
text('TOYOTA'));

Use this instead:
var mySelect = document.getElementById("mySelect");
mySelect.add(new Option("Toyota", "TOYOTA"));

Javascript createElement() not working in Chrome

Javascript createElement() is not working in Chrome but it works in IE and Firefox fine. Why?

It's working perfectly, use this code:
var catDiv = document.createElement("div");
catDiv.innerHTML = "Test";
document.body.appendChild(catDiv);
Another working example (if you have an element with Id = myTableBody in your HTML)
var appendingTo = document.getElementById("myTableBody");
var tr = document.createElement("tr");
tr.setAttribute("name", "i");
appendingTo.appendChild(tr);

var name = document.createElement("Div" );
will work. And later you can add the attributes like
name.colSpan="2";
document.body.appendChild(name);
Note: don't try to use angular brackets like createElement("<div />").
It will not work in Chrome.
Edit: syntax issue in above code fixed. there should be a dot instead of comma.

Beacause your code is messed up, there's nothing wrong with "createElement":
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
window.onload = function () {
for (var i = 0; i < 100; i ++) {
var div = document.createElement ("div");
div.style.border = "1px solid black";
div.style.margin = "20px";
div.style.padding = "10px";
document.body.appendChild (div);
}
}
</script>
<style></style>
</head>
<body></body>
</html>

So I also couldn't get createElement() to work in chrome. After reading Caio's post and testing the code provided I figured out what I was doing wrong.
On w3schools.com the examples they provide always use the tag name in all caps ex. createElement("DIV"), which is the way I was using it and with poor results.
After changing from "DIV" to "div" in my own code it instantly worked.
Thanks Caio.