CODEWITHSUNDEEP
javascriptbuttononclickaddeventlistener
adan96ful
adan96ful

Reputation: 79

How to implement onclick function directly in JavaScript code instead of html tag?

The following link includes my project stored on codepen:

[https://codepen.io/adan96/pen/ExaRgOe?editors=1010]

Previously I had onclick function located in html tag, however I want to make it working directly in JS code:

document.getElementById("requestTypeSelection").selectedIndex = -1;
document.getElementById("requestSubtypeSelection").selectedIndex = -1;
document.getElementsByClassName("batch")[0].selectedIndex = -1;
document.getElementsByClassName("batch")[1].selectedIndex = -1;

document.getElementById("button1").onclick = function() {openTab("click", generalData)};
document.getElementById("button2").onclick = function() {openTab("click", materialData)};

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    if (tabName != "generalData") {
      tablinks[0].style.backgroundColor = "#cfdeed";
    } else {
      tablinks[0].style.backgroundColor = "#8eb3dc";
    }
  }
  document.getElementById(tabName).style.display = "block";
  event.currentTarget.className += " active";
}

window.onload = function() {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById("generalData").style.display = "block";
  event.currentTarget.className += " active";
  tablinks[0].style.backgroundColor = "#8eb3dc";
};

var $select1 = $("#select1"),
  $select2 = $("#select2"),
  $options = $select2.find("option");

$select1
  .on("change", function() {
    $select2.html($options.filter('[value="' + this.value + '"]'));
  })
  .trigger("change");

After clicking on button1 and button2 I should see their tabs below them, but nothing appears. Would You gave advice how to modify the code?

Upvotes: 0

Views: 2079

Answers (1)

Archie
Archie

Reputation: 911

Use EventTarget.addEventListener to bind a event to a Element. onclick doesnt work like this.

document.getElementById("button1").addEventListener("click", function() {
  console.log("Clicked");
});
<button id="button1">Click Me</button>

If the first argument of the openTab("click", materialData) is the actual event object, then you should do something like this:

document.getElementById("button1").addEventListener("click", function(event) {
  console.log("Clicked");
  openTab(event, materialData)
});

Upvotes: 2

Related Questions