如何为动态创建的按钮添加链接？

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);<!--add the button link --> returns a null value.

Answer 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)

Answer 2

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( /* ... */ );