Javascript Function to Click Element that is Defined with Multiple Classes

Question

I am trying to click a button but the only thing that defines it is multiple classes. The element I want to click is

<div class="U26fgb XHsn7e obPDgb M9Bg4d">This is a button </div>

How would I go about clicking it using Javascript ?

Answer 1

As long as it is the only <div> element with that class combination, you'd use .querySelector() , which accepts any valid CSS selector as an argument so you can select elements in JavaScript the same way you would in CSS:

 // Scan the document for the <div> that has the required classes let theDiv = document.querySelector("div.U26fgb.XHsn7e.obPDgb.M9Bg4d"); // Set up a click event handling function theDiv.addEventListener("click", function(){ console.log("you clicked me"); }); // Trigger the click event of the <div> theDiv.click();

 <div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>

FYI: You should get out of the habit of putting spaces on the insides of the < and > delimiters in HTML. Use this:

<div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>

Not this:

< div class="U26fgb XHsn7e obPDgb M9Bg4d" >Click Me< /div >

Answer 2

very simple with jQuery:

$(".U26fgb.XHsn7e.obPDgb.M9Bg4d").click(function(){
  console.log("clicked!");
}); 

Answer 3

const div = document.querySelector('div .M9Bg4d');
div.addEventListener("click", ()=> {
 // here put what you wanna do after clicking the div.

});

Answer 4

onclick attribute works well inside almost all the html tags and here is the simple solution to click on the div and get a result. All the Best!

 function clickDiv(){ console.log("Div is Clicked"); }

 <div class="U26fgb XHsn7e obPDgb M9Bg4d" onclick="clickDiv()">This is a button </div>