CODEWITHSUNDEEP
javascript
Adrian
Adrian

Reputation: 315

Get value inside of the same div

I read this topic (and some others):

get value of sibling in same div

But still didn't gave me an awnser.

I have 2 divs with the same name (created by a loop). When onClick is fired i want to pass the value of the idUser to the getNumber() function and then show the idUser on the p tag

HTML:

<div id="telephoneButton">
    <input type="hidden" value="1" id="idUser">
    <input type="button" value="Show Number" onClick="
    getNumber(idUser.value);">              
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="2" id="idUser">
    <input type="button" value="Show Number" onClick="
    getNumber(idUser.value);">
    <p id="number"></p>
</div>

JavaScript:

function getNumber(idUser)
{
    document.getElementById("number").innerHTML = idUser;
}

I know this isn't going to work because everything has the same ids so the script will show an error (or maybe show the result on the first div). My question is, can i pass the father DIV of the button and get all the data i need on the script using children? If yes, how?

I would greatly appreciate any help.

Upvotes: 0

Views: 1382

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65796

"I have 2 divs with the same name"

STOP RIGHT THERE!

No two elements should ever have the same id. You should adjust your loop that produces these elements so that they get produced with unique id values.

Now, you can make this work by gathering up both div elements and then digging inside them, like this:

window.addEventListener("DOMContentLoaded", function(){

     // Assuming, of course that these are the only div elements on the page.
     // The selector here could be modified to be hierarchical, but you didn't
     // provide enough HTML to see that.
     var theDivs = document.querySelectorAll("div");
  
     // Loop through the div elements (no matter how many)
     for(var i = 0; i < theDivs.length; ++i){
       
         // Create an Immediately Invoked Function Expression (IIFE) that passes itself
         // a COPY of the looping variable (i) so that each click callback will get its
         // own different value for it.
         (function(counter){
           
           // Wire up the button that is in the current div to a click event callback function
           theDivs[i].children[1].addEventListener("click", function() {
             
               // Call the getNumber function and pass it the data it needs and the right
               // paragraph to write that data into.
               getNumber(theDivs[counter].children[0].value, theDivs[counter].children[2]);
            });
           
         }(i));   
     }
  

    function getNumber(idUser, element){
       element.innerHTML = idUser;
    }
  
});
<div id="telephoneButton">
    <input type="hidden" value="1" id="idUser">
    <input type="button" value="Show Number">              
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="2" id="idUser">
    <input type="button" value="Show Number">
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="3" id="idUser">
    <input type="button" value="Show Number">
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="4" id="idUser">
    <input type="button" value="Show Number">
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="5" id="idUser">
    <input type="button" value="Show Number">
    <p id="number"></p>
</div>

But, really, this is a hack. You should give all the important HTML elements unique id values or assign them to a CSS class so they can be identified uniquely later.

Also, don't use inline HTML event handlers (... onclick="") as they create spaghetti code and create global function wrappers around the onXyz attribute value that modifies the this binding for the callback function. Additionally, they don't allow for more than one event handler per event. Instead, use the W3C DOM Event Model Standard of element.addEventListener().

Upvotes: 1

wawawoom
wawawoom

Reputation: 101

As you know, have elements with same ids is really bad. But anyway this code work :

<div id="telephoneButton">
    <input type="hidden" value="1" id="idUser" />
    <input type="button" value="Show Number" onClick="getNumber(this);" />              
    <p id="number"></p>
</div>

<div id="telephoneButton">
    <input type="hidden" value="2" id="idUser" />
    <input type="button" value="Show Number" onClick=" getNumber(this);" />
    <p id="number"></p>
</div>

And JS :

var getNumber = function(elem) {
    var num = elem.parentElement.children[0].value;
    elem.parentElement.children[2].innerHTML = num;
}

See Fiddle : https://jsfiddle.net/ugobsr79/2/

If you want to show all numbers at the same time then use this JS :

var getNumber = function(elem) {
    var idUsers = document.querySelectorAll('input[id="idUser"]');
    for (var i = 0; i < idUsers.length; i++) {
        var num = idUsers[i].value;
        idUsers[i].parentElement.children[2].innerHTML = num;
    }
}

Fiddle here : https://jsfiddle.net/ugobsr79/3/

Upvotes: 0

Hektor
Hektor

Reputation: 1945

Something like this should solve your problem, but as the others jave been saying, you should be using things like names and classes to get hold of multiple variables inside the DOM. Here's the badboy solution, but you need to change both to : 

        var allElem = document.getElementsByTagName('telephoneButton');
        for (var i=0, max=allElem.length; i < max; i++) {
          alert(allElem[i].p.innerHTML);
        }

Upvotes: 0

Related Questions