Onclick finction using javascript

Question

0.00/5 (No votes)

See more:

Hi all I have this code in javascript

for (var i = 0, link; i < 5; i++) {
var div = document.createElement("div");
var link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
div.appendChild(link);
document.body.appendChild(div);
}

Problem

When you click on the links, the alert box always says 5. What would you change in the javascript to fix this?

when I click the link it gives me 5 I need when I click the link give me the number of the link any body tell me the error ??

I don't want to use link.onclick = function (event) { alert(event.target.innerHTML); };

What I have tried:

I tried LOT OF THINGS BUT with no true result

Posted 4-Oct-16 2:58am

Sarah Mohammed77

Updated 4-Oct-16 4:35am

Add a Solution

3 solutions

Solution 1

JavaScript closure inside loops – simple practical example - Stack Overflow[^]

JavaScript

function createlink(i) {
    var link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.onclick = function () {
        alert(i);
    };

    return link;
}

for (var i = 0, link; i < 5; i++) {
    var div = document.createElement("div");
    var link = createlink(i);
    div.appendChild(link);
    document.body.appendChild(div);
}

Posted 4-Oct-16 3:02am

F-ES Sitecore

Updated 4-Oct-16 3:57am

v2

Comments

Sarah Mohammed77 4-Oct-16 9:21am

I do it like that but it still gives me 5

var funcs = [];
function createfunc(i) {
return function() { console.log("My value: " + i); };
}
for (var i = 0, link; i < 5; i++)
{
funcs[i] = createfunc(i);
var div = document.createElement("div");
var link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
div.appendChild(link);
document.body.appendChild(div);
}

F-ES Sitecore 4-Oct-16 9:57am

You didn't do anything that changes your code, all you did was add a call to a function, your problem code remains.

The intention was to read the article and understand what it is teaching you and then applying that understanding to your code. You'll never be a good developer just hoping that someone random site will have random code you can paste that magically fixes your code.

Solution 2

The reason it is always 5 is because your loop increments i to 5 and you alert that same variable.

You said,

Quote:
I don't want to use link.onclick = function (event) { alert(event.target.innerHTML); };

Why not? Something along those lines is the correct way to do it.

Posted 4-Oct-16 3:32am

ZurdoDev

Comments

Sarah Mohammed77 4-Oct-16 9:56am

because I don't need this solution

ZurdoDev 4-Oct-16 9:57am

That IS the solution. Why don't you need it?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-10-04T04:35:00

try this

JavaScript

for (var i = 0, link; i < 5; i++) {
                
                 var div = document.createElement("div");
                 var link = document.createElement("a");
                 link.innerHTML = "Link " + i;
                 link.onclick = function () {                     
                     alert(this.innerText.split(' ')[1]);
                 };
                 div.appendChild(link);
                 document.body.appendChild(div);
             }