Why Does an Onclick Property Set with Setattribute Fail to Work in Ie

var htmlString = `<button id='btn4' onclick='showHide(event)'>4</button>
<div class='content hide'>
  <h4>Dynamically Registered On Event Attribute by Parsing htmlString</h4>
  <pre><code>
document.querySelector('#btn3+div+hr').insertAdjacentHTML('afterend', htmlString);
</code></pre>
</div>
<hr>`;

function showHide(event) {
  var tgt = event.target;
  if (tgt.tagName === "BUTTON") {
    var code = tgt.nextElementSibling;
    code.classList.toggle('hide');
  }
  return false;
}

//#btn1
//On-Event Property
document.getElementById('btn1').onclick = showHide;

//#btn2
//EventListener
document.getElementById('btn2').addEventListener('click', showHide);

//#btn3
//Dynamically registered On event Attribute by setAttribute() method. 
document.getElementById('btn3').setAttribute('onclick', "showHide(event, this)");

//#btn4
//Dynamically Registered On Event Attribute by Parsing htmlString
document.querySelector('#btn3+div+hr').insertAdjacentHTML('afterend', htmlString);

* {
  margin: 0;
  padding: 0
}

button {
  padding: 2px 5px;
}

button+div {
  opacity: 1;
  transition: opacity 1s ease;
}
.content {
  margin: 0 0 20px 0
}
button+div.hide {
  opacity: 0;
  transition: 1s ease;
}
code {
  background: #000;
  color: lime;
}

<!--#btn0-->
<button id='btn0' onclick="showHide(event, this)">0</button>
<div class='content hide'>
  <h4>On-Event Attribute</h4>
  <pre><code>
<button id='btn0' onclick="showHide(event, this)">On-Event Attribute</button>
</code></pre>
</div>
<hr>

<!--#btn1-->
<button id="btn1">1</button>
<div class='content hide'>
  <h4>On-Event Property</h4>
  <pre><code>
document.getElementById('btn1').onclick = showHide;
</code></pre>
</div>
<hr>

<!--#btn2-->
<button id='btn2'>2</button>
<div class='content hide'>
  <h4>EventListener</h4>
  <pre><code>
document.getElementById('btn2').addEventListener('click', showHide);
</code></pre>
</div>
<hr>

<!--#btn3-->
<button id='btn3'><del>3</del></button>
<div class='content'>
  <h4>Dynamically Registered On Event Attribute by <code>setAttribute()</code> method <b>FAILED</b></h4>
  <pre><code>
<del>document.getElementById('btn3').setAttribute('onclick', 'showHide(event)');</del>
</code></pre>
</div>
<hr>

<!--#btn4 is dynamically created and will be inserted here-->
<!--Selector: '#btn3+div+hr' ||  Position: 'afterend'-->

Problems with JavaScript in IE

IE has an issue with the setAttribute function and event handlers. (Read here.) Use the onclick property in addition to setAttribute.

buttonnode.setAttribute('onclick','removeValue(this)');
buttonnode.onclick = function() { removeValue(buttonnode); };

Why is this onclick button not working, in javascript

In you scripts.js file you can replace the following code

function myFunction(elmnt,clr) {
  elmnt.style.color = clr;
}

td.setAttribute("onclick", "random(element, red)")

by

function random(elmnt,clr) {
  elmnt.style.color = clr;
}

document.querySelectorAll('td').forEach(function(td) {
    td.setAttribute("onclick", "random(this, 'red')")
});

There were few mistakes in the code.

td.setAttribute("onclick", "random(element, red)")

1. td is not defined.
2. random is not defined
3. element is not defined
4. red is not defined

You can fix those by:
First select all the tds using the document.querySelectorAll function, then loop through the result. And then in the loop replace random(element, red) by random(this, 'red'). You see the this is a reference to the clicked td and red is wrapped in quotes.
And lastly you have to fix the function declaration. function myFunction(elmnt,clr) { to function random(elmnt,clr) {

Change onclick event

Try

document.getElementById("back").addEventListener("click", function(){
  window.location.href='../../';
});

HTML changes with element.setAttribute(onclick,alert('Test');) and element.onclick = alert('Test');;

Yes. setAttribute adds an attribute to an Element DOM node. For the onclick attribute, there is a side effect under the covers of also adding an onclick event handler, which is made by 'compiling' the attribute value into a javascript function.

Assigning a function to the onclick property of the element directly does attach the handler, but does not automatically add an attribute to the DOM node.

Now it is possible that there are browsers that do not make the distinction between adding the attribute and attaching the handler directy. But keep in mind that although modifying the document may create scriptable objects as side effect, the reverse does not have to be the case: programmatically creating DOM structures may or may not change the HTML underlying the document according to the browser you happen to be using.

Javascript: Receiving onClick on top of image inside a div, can it be done?

Rather than overwriting the innerHTML of the div, why not do something like this?

var img = document.createElement('img');
img.setAttribute('src', myImage);
img.setAttribute('width', myDiv.width);
img.setAttribute('height', myDiv.height);
myDiv.appendChild(img);

Internet Explorer 7 onclick event on submit button does not fire

IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.

Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.

The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.

If you do use jQuery, your code will become:

$(element).click(function() {alert('test');});

Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.

Related Topics