Why isn't my function related to an onclick workin?

Question

I'm studding HTML, CSS and JS and while I was creating an exercise, I was forced to stop due to an error. I created an button dynamically, setted an onclick to it and then created a function with that onclick. The problem is that the function isn't working, at leats it doesn't made anything till now.

let formularys = document.querySelector('section#formulary')
let slct = document.createElement('select')
let opts = document.createElement('option')
let optp = document.createElement('option')
let fbtn = document.querySelector('input#formularybtn')
let nbtn = document.createElement('input')
let br = document.createElement('br')

slct.id = 'pors'
slct.size = '2'
opts.value = 'rsite'
opts.innerHTML = 'Rate site'
optp.value = 'rp'
optp.innerHTML = 'Rate products'
nbtn.setAttribute('type', 'button')
nbtn.setAttribute('value', 'Next')
nbtn.setAttribute('onclick', 'nbutton')

function nbutton(){
    console.log('Next working')
    /*if(slct.selectedIndex == 1){
        console.log('Valid rate choose')
    }*/`enter code here`
}

Does this answer your question? [Add onclick event to newly added element in JavaScript](https://stackoverflow.com/questions/3316207/add-onclick-event-to-newly-added-element-in-javascript) — Ivar, May 02 '21 at 21:12
You created all these elements but never appended them to any part of your page. So, they are clearly not yet part of your page. — Carsten Massmann, May 02 '21 at 21:23
You must append the button to the DOM and change in 'onclick', 'nbutton()' the statement setAttribute — Stefino76, May 02 '21 at 21:27
Duplicate of [Radio button onclick not working](/q/32139849/4642212): exactly the same cause: `nbutton` doesn’t do anything. Since the `onclick` attibute eval’s the string inside, the reference to the function is discarded. Calling it requires parentheses. But `onclick` is bad practice anyway. — Sebastian Simon, May 02 '21 at 23:18
Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, May 02 '21 at 23:20

score 1 · Accepted Answer · answered May 02 '21 at 21:21

1

instead of using setAttribute you can just do

nbtn.onclick = nbutton

in javascript, onclick isn't a string but a function.

answered May 02 '21 at 21:21

Tony Zhang

417
4
8

score 0 · Answer 2 · answered May 02 '21 at 21:39

The problem is, you are not appending your html code generated from JavaScript to DOM. You can either append to main DOM like below

document.body.appendChild(nbtn);
document.body.appendChild(optp);

or you can append them to some parent div by first getting div id

document.getElementById("divId").appendChild(nbtn);

where divId is id of your div where you want to add this html.

Also you should assign event listener in correct way as suggested by Tony and Rashed Rahat.

score -1 · Answer 3 · answered May 02 '21 at 21:25

-1

Try:

element.onclick = function() { alert('onclick requested'); };

answered May 02 '21 at 21:25

Rashed Rahat

2,357
2
18
38

That’s not an adequate replacement for `nbtn.setAttribute('onclick', 'nbutton')`. – Sebastian Simon May 02 '21 at 23:21

Why isn't my function related to an onclick workin?

3 Answers3