CODEWITHSUNDEEP
javascript
David
David

Reputation: 81

How to get text content of one h3 at a time in javascript?

I am having difficulty to get text content of h1 at a time when I click on any button element . Can anyone help me out please? 

    <div id="makeSelection" ><h1>Text Content 1</h1>
    <button onclick="eveent()">Click Me</button>
    </div>
    <div id="makeSelection" ><h1>Text Content 2</h1>
        <button onclick="eveent()">Click Me</button>
    </div>
    <div id="makeSelection" ><h1>Text Content 3</h1>
        <button onclick="eveent()">Click Me</button>
    </div>


     function eveent(){

        var text = document.getElementById('makeSelection').textContent;

        console.log(text);



                    }

Upvotes: 0

Views: 1169

Answers (4)

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

I would suggest to make addEventListener in javascript and clear the click event from HTML template..

Then use eveent.bind(this, item.textContent) to bind the particular item which was listened in click event.

Edit:

If you want to add event listener to a button, then get the button like, (Assuming you have class name for each div as makeSelection and not same id's repeated.

const selection = document.querySelectorAll(".makeSelection button");

Then make an event listener like,

item.addEventListener('click', eveent.bind(this,item.previousElementSibling.textContent))

Through item.previousElementSibling.textContent , we are passing the textContent of h1 tag..

const selection = document.querySelectorAll(".makeSelection button");

function eveent(clickedItem){
  console.log(clickedItem)
}

selection.forEach((item,i) => {
  item.addEventListener('click', eveent.bind(this,item.previousElementSibling.textContent))
})
<div class="makeSelection" >
  <h1>Text Content 1</h1>
   <button>Click Me</button>
 </div>
 <div class="makeSelection">
   <h1>Text Content 2</h1>
   <button>Click Me</button>
 </div>
 <div class="makeSelection">
   <h1>Text Content 3</h1>
   <button>Click Me</button>
 </div>

Upvotes: 1

Nourhan Ahmed
Nourhan Ahmed

Reputation: 179

try to get the h1 inside "makeSelection" and make button outs

<div id="makeSelection"><h1>Text Content 1
  </h1>
function eveent(){

        var text = document.querySelector("#makeSelection h1").innerText 
}

Upvotes: 0

Reporter
Reporter

Reputation: 3948

A simple example with plain Javascript to read the content of clicked div 

  <html>
        <head>
            <script>
            function eveent(c) {
                alert(c.childNodes[0].innerText);
            }
            </script>
        </head>
        <body>
         <div class="makeSelection" onclick="eveent(this)"><h1>Text Content 1</h1></div>
         <div class="makeSelection" onclick="eveent(this)"><h1>Text Content 2</h1></div>
         <div class="makeSelection" onclick="eveent(this)"><h1>Text Content 3</h1></div>
        </body>
    </html>

Upvotes: 0

beerwin
beerwin

Reputation: 10327

This is one way how you could do it:

  • Give ID-s to the headings.
  • Call the click event with the id of the desired heading.
  • Do your thing with the element content. (In this example, you console log it's text content)

function clickEvent (target){
  var heading = document.querySelector(target);
  if (heading) {
    console.log(heading.textContent);
  }
};
<div>
  <h1 id="heading-1">Text Content 1</h1>
  <button onclick="clickEvent('#heading-1')">Click Me</button>
</div>
<div>
  <h1 id="heading-2">Text Content 2</h1>
  <button onclick="clickEvent('#heading-2')">Click Me</button>
</div>
<div>
  <h1 id="heading-3">Text Content 3</h1>
  <button onclick="clickEvent('#heading-3')">Click Me</button>
</div>

Note: I removed the duplicate ids from the divs, as they are not required and also duplicate IDs are not valid in HTML.

Upvotes: 0

Related Questions