CODEWITHSUNDEEP
javascriptbuttontabs
Jose Garcia
Jose Garcia

Reputation: 35

Creating a dynamic number of buttons with a dynamic URL

I feel so close to this one. I just can't get the buttons generated to open up in a new tab. I'm stuck!

     function buildButton(url,i,size) {
            document.write("Building Button with URL= "+url+"<p>");

            var btn = document.createElement("BUTTON");
            btn.appendChild(document.createTextNode("PIDs "+i+" to "+(i+size)));
            btn.setAttribute("href",url);
            btn.setAttribute("target","_blank");
            document.body.appendChild(btn);


}

Upvotes: 0

Views: 138

Answers (3)

roshambo
roshambo

Reputation: 2794

Another solution based on this HTML button opening link in new tab. Looks like you have figured it out anyway

function buildButton(url,i,size) {
    document.write("Building Button with URL= "+url+"<p>");

    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("PIDs "+i+" to "+(i+size)));
    btn.setAttribute("onclick","window.open('" +url+"', '_blank')");

    document.body.appendChild(btn);
}  
buildButton("http://www.google.com","Thing", 44) ;

Upvotes: 0

Jose Garcia
Jose Garcia

Reputation: 35

Solved it with:

function buildButton(url,i,size) {
    var btn = document.createElement("INPUT");
    btn.setAttribute("type","button");
    btn.setAttribute("onclick", "window.open('"+url+"')");
    btn.setAttribute("value","PIDs "+i+" to "+(i+size));
    btn.setAttribute("target","_blank");
    document.body.appendChild(btn);
    document.write("<p>");
}

Upvotes: 0

leofalmeida
leofalmeida

Reputation: 323

Change the <button> tag to <a> tag

Buttons doesn't have the href and target attributes, the <a> tag has. The code should be like this:

function buildButton(url,i,size) {
  document.write("Building Button with URL= "+url+"<p>");

  var a = document.createElement("a");
  a.appendChild(document.createTextNode("PIDs "+i+" to "+(i+size)));
  a.setAttribute("href",url);
  a.setAttribute("target","_blank");
  document.body.appendChild(a);
}

buildButton('https://stackoverflow.com/', 1, 1);
<!DOCTYPE html>
<html>
<body>

</body>
</html>

Upvotes: 1

Related Questions