How can I add a link to dynamically created button?

Question

Once the buttons are created, is there anyway I can add a link or use window.location method like this: `window.location = 'nextpage.html?foo=number'. I currently have this

var typeValue = location.search;
var typeStringValue= typeValue.replace("?type=","");
var containers = typeValue.replace("?type=multi","");
var containersValue = parseInt(containers);
var sampleLetter = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

function createButton(buttonName){
    var buttonDivBlock = document.getElementById("sampleSets");
    var buttonElement = document.createElement("input");
        buttonElement.setAttribute("type","button");
        buttonElement.setAttribute("name",buttonName);
        buttonElement.setAttribute("value","Sample Set"+" "+buttonName);
        buttonElement.setAttribute("id",buttonName);
        buttonDivBlock.appendChild(buttonElement);
     // document.getElementById(sampleLetter[i]).setAttribute('onclick',window.location='SampleInfo.html'+typeStringValue+bottonName);<!--add the button link -->
}

function setButtons(numberOfContainers){

     for(i=0;i<numberOfContainers;i++){
         createButton(sampleLetter[i]);

     }
}

window.onload = function(){
    setButtons(containersValue);
}

But document.getElementById("'"+sampleLetter[i]+"'").setAttribute('onclick',window.location='SampleInfo.html'+typeStringValue+bottonName); returns a null value.

Possible dupes/related questions: http://stackoverflow.com/questions/789824/add-onclick-property-to-input-with-javascript, http://stackoverflow.com/questions/6909988/add-an-onclick-event-to-a-div,http://stackoverflow.com/questions/3316207/add-onclick-event-to-newly-added-element-in-javascript . . . note that "onclick" is not a valid attribute, which is what your sample code is attempting to do. — ernie, Jul 12 '13 at 19:57
Well its not what I'm looking for, because I've tried that and no success. :( — Ch32k0, Jul 12 '13 at 20:00
My mistake, onclick is a valid attribute . . . looks like you're not getting the element in your getElementById. Note that in your recent edit, the code should fail as `i` won't be defined in the function . . . — ernie, Jul 12 '13 at 20:06

score 1 · Accepted Answer · answered Jul 12 '13 at 20:02

1

Well, maybe I can help you along with an example:

function getFive() { return 5;}

callOtherFunction("stringArgument", getFive());

The second argument to callOtherFunction is going to be 5, not the getFive function. In many cases, like adding event listeners and AJAX code, you actually want to pass the function itself as an argument, so it can be called later. But if you don't want to bother declaring that function seperately, it looks like this:

callOtherFunction("stringArgument", function() { return 5; });

To make code look cleaner, you can press Enter after the { and make a multi-line function.

Now, all that in mind, take another look at the line you've commented out. Do you see what's missing? (PS. Apologies for the "egging-on" format - I find people get much better at figuring things out if I help them find the solution, rather than just showing it to them)

answered Jul 12 '13 at 20:02

Katana314

8,429
2
28
36

I twisted it just a bit ;)... will post my answer and give you credit! ;) – Ch32k0 Jul 12 '13 at 20:45
Couldn't make my answer because of rep ... but will give it by pieces – Ch32k0 Jul 12 '13 at 20:48
So i followed the aproach that @Katana314 told me and added a `function getElementLink(buttonName){ var btnLink = "window.location='SampleInfo.html?type=multi"+containersValue+"'"; return btnLink; } function createButton(buttonName){... buttonElement.setAttribute("onclick",getElementLink(buttonName)); buttonDivBlock.appendChild(buttonElement); ... }` – Ch32k0 Jul 12 '13 at 20:49

score 0 · Answer 2 · answered Jul 12 '13 at 20:02

0

The sampleLetter variable is not defined where you are trying to use it (judging by commented code). Use the value you had just set to the id attribute a few lines earlier.

document.getElementById(buttonName).setAttribute( /* ... */ );

Or if you are trying to set it in the loop instead of in the createButton function, do not add the single quotes

document.getElementById(sampleLetter[i]).setAttribute( /* ... */ );

answered Jul 12 '13 at 20:02

Scott Isaacs

1,168
7
16

sorry I removed them while I was pasting the code here... thank you for noticing ;) – Ch32k0 Jul 12 '13 at 20:07
Does no success mean that `document.getElementById(sampleLetter[i])` or `document.getElementById(buttonname)` is still null? Because you could also have additional problems preventing your code from working. and the first step to finding the answer is making sure you are returning a non-null element with the call to `getElementById`. – Scott Isaacs Jul 12 '13 at 20:17
Neither, and the only line that breakes my code is the `document.getElementById(buttonName).setAttribute('onclick',window.location.href='SampleInfo.html'+typeStringValue+bottonName);` – Ch32k0 Jul 12 '13 at 20:25
Right, I know. That line is calling `getElementById`. Does that return a value? Try splitting it into two lines. `var btn = document.getElementById(buttonName);` `btn.setAttribute(...)` Also, `bottonName` is spelled differently. – Scott Isaacs Jul 12 '13 at 20:44
-_-...it worked :s...lol I was loosing my hair because of a simple freakin "o" ....THANK FOR NOTICING! – Ch32k0 Jul 12 '13 at 20:55

How can I add a link to dynamically created button?

2 Answers2