Unable to implement onclick event on HTML element

Question

I have an array of 10 elements. At first I want to shuffle the array elements and display them (my current code does this). Then I want to show an alert message if any of the displayed array elements are clicked. This is the thing I am having problem with. If, I am doing onclick, it's showing me only 1 array element instead of all the 10 array elements and also showing the following error in console Uncaught TypeError: Cannot set property 'onclick' of undefined. My code is (I am using only javascript):

 <script>
    function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
                }
            return array;
        }

    var myArray = ['1','2','3','4','5','6','7','8','9','10'];

    newArray = shuffleArray(myArray);

    for (i=0;i<newArray.length;i++) {
        var p = document.write(newArray[i] + "<br >");
                    p.onclick = showAlert; // this is showing me only 1 array element and also showing error in concole
    }

             function showAlert() {
                      alert("onclick Event detected!")
             }
 </script>

You're writing out a String then trying to associate an onclick handler with it. You need to create an actual tag. — Evan Knowles
– Evan Knowles, Commented May 9, 2014 at 9:57

Johan · Accepted Answer · 2014-05-09 10:02:43Z

2

You need to create an actual element, rather than trying to bind events to strings:

for (i=0;i<newArray.length;i++) {
    var p = document.createElement('p');
    p.innerHTML = newArray[i];
    p.onclick = showAlert; 
    document.body.appendChild(p);
}

http://jsfiddle.net/92fRb/1/

answered May 9, 2014 at 10:02

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2567857 Over a year ago

This works, but the drawback is, if I click anywhere on the page along the width (row) which have the array elements displayed, the alert message pops up. I want the alert message to be displayed only if the array elements are clicked not if even I click a few distance apart the array elements

Johan Over a year ago

@user2567857 Well, p-tags renders as block. You can either render an inline element, or adjust them to display: inline-block if your browser supports it.

Community · Accepted Answer · 2017-05-23 10:33:21Z

0

Cannot set property 'onclick' of undefined

Here's your problem... p is undefined.
Why?
Because document.write does not return a DOM element. Actually it does not return anything at all (or, returns undefined).

You want to:

Use document.createElement() to create an element.
Use p.innerHTML to set the content (inner HTML) of your new element.
Append your new element to the document.

Your code can be revised as suggested in @Johan's answer.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered May 9, 2014 at 10:10

EyalAr

3,1801 gold badge24 silver badges30 bronze badges

Comments

Jonast92 · Accepted Answer · 2014-05-09 10:20:28Z

0

for (i=0;i<newArray.length;i++){
    var p = document.write("<span class='no'>"+newArray[i] + "</span><br />");
}

function showAlert(){
    alert("onclick Event detected!")
}

for(i=0;i<document.getElementsByClassName("no").length;i++){
    document.getElementsByClassName("no")[i].onclick=showAlert;
}

edited May 9, 2014 at 10:20

Jonast92

4,9671 gold badge20 silver badges33 bronze badges

answered May 9, 2014 at 10:03

Vikram Jakkampudi

5121 gold badge3 silver badges16 bronze badges

Collectives™ on Stack Overflow

Unable to implement onclick event on HTML element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related