CODEWITHSUNDEEP
javascripthtmlbutton
DimensionalDrift
DimensionalDrift

Reputation: 27

Cant add attributes to buttons

so I'm working with creating an html-based game. I've been testing and I just cant figure one thing out. This is my code:

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
}
</script>

So this code does work. However, the button added does not do anything but change color when clicked. How can I make it so the button added runs a function?

EDIT: After the suggestions, I have this code:

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = test();
}
</script>
And it creates a large amount of buttons when the first one is clicked.

EDIT 2: I got it to work now. 

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = function(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Button")
btn.appendChild(name);
document.body.appendChild(btn);
}
}
</script>
Thanks for the help everyone! :)

EDIT 3: ...and another thing doesn't work. I updated the code to:

<button onclick="test()">
Click Me!
</button>
<script>
function test(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Click Me!")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = function(){
var btn = document.createElement("BUTTON")
var name = document.createTextNode("Click Me!")
btn.appendChild(name);
document.body.appendChild(btn);
btn.onclick = test()
}
}
</script>

But when I click the button created from the original button, it creates 2 instead of just 1, which is what I want. In addition, the first of the two does nothing. How can I fix this?

Upvotes: 0

Views: 95

Answers (5)

8protons
8protons

Reputation: 3979

I believe that your confusion is due to the fact that your dynamically adding elements (in this case, buttons) and then wanting to access said elements (buttons).

The easiest way to name these new elements is to first assign the statement that creates them,

document.createElement("BUTTON");

to a variable, which you actually did do!

btn = document.createElement("BUTTON");

So, keep in mind that you can do stuff with that variable you created, like giving it a class or ID name to access.

btn.setAttribute('class', 'btn-class');

Now you can assign any styling elements from your CSS with class name btn-class or whatever else you may desire to choose.

Here's a JSFiddle that shows that: https://jsfiddle.net/dg1amubr/4/

Upvotes: 2

Hugo S. Mendes
Hugo S. Mendes

Reputation: 1086

add an onclick function to the button

e.g

function myFunction() {
 // onclick stuff
}

element.onclick = myFunction; // Assigned

[UPDATE]

to make it easier I've created a fiddle

https://jsfiddle.net/33h3bgxc/1/

Upvotes: 1

brk
brk

Reputation: 50326

Use addEventListener to attach an event with new button. Hope this snippet will be useful

function test(){
var btn = document.createElement("BUTTON");
var name = document.createTextNode("Button");
btn.id = "newButton"
btn.appendChild(name);
document.body.appendChild(btn);
var _getNewButton = document.getElementById('newButton');
_getNewButton.addEventListener('click',function(){
alert('New Button');
})
}
// You can also directly attach addEventListener without going via id.
// btn.addEventListener('click',function(){ ..})

Working Example

Upvotes: 1

Vasyl Moskalov
Vasyl Moskalov

Reputation: 4650

May be you need to use something like 

btn.addEventListener('click',callback_function)

?

Upvotes: -1

Joey Ciechanowicz
Joey Ciechanowicz

Reputation: 3663

You need to assign an event handler to that button.

btn.addEventListener('click', function(event) { 
   console.log('I was clicked');
});


function test() {
  var btn = document.createElement("BUTTON")
  var name = document.createTextNode("Button")
  btn.appendChild(name);
  btn.addEventListener('click', function(event) {
    alert('I was clicked');
  });
  document.body.appendChild(btn);
}
<button onclick="test()">
  Click Me!
</button>

Upvotes: 0

Related Questions