0

I'm currently playing around with Net Promoter Score stuff with JavaScript and I'm trying to set it up as each score 1-10 is an individual button that the user will click and then submit. This is what I have so far, but it's not working.

<!DOCTYPE html>
<html>
<body>
<link type="text/css" rel="stylesheet" href="NPSstyle.css"/>
    <h1>Net Promoter Score<h1>
        <p class="question">How likely are you to recommend this tool to a friend or colleague?</p>
<form id="myForm">

    <button type="button" class="button1">1</button>
    <button type="button" class="button2">2</button>
    <button type="button" class="button3">3</button>
    <button type="button" class="button4">4</button>
    <button type="button" class="button5">5</button>
    <button type="button" class="button6">6</button>
    <button type="button" class="button7">7</button>
    <button type="button" class="button8">8</button>
    <button type="button" class="button9">9</button>
    <button type="button" class="button10">10</button>
</form>
<p class="explanation">Not likely............................................................Very likely</p>


<script>
function checkInput() {
    document.getElementByClassName("button1").onclick = setInput(1);
}

function setInput(input) {
    console.log("You clicked: " + input);
}


</script>

I'm just testing things out right now. I can't really figure out how to properly call a function inside of the HTML, and I know there's probably a much more efficient way of checking which button a user clicks as well. Thanks!

Spance
  • 555
  • 3
  • 11
  • 29
  • There is a second problem with this code: `setInput(1)` is not a function. If you want to use ".onclick" (DOM level 0 registration), the right hand side of the assignment has to be a function. As simplest solution, write `function() { setInput(1) }` (Although there are more elegant solutions to your problem). – rplantiko Mar 08 '16 at 19:20
  • Start from [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName), then continue with [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). In the latter, make sure you understand the meaning and content of event object and also how `this` keyword works in event handlers. – Teemu Mar 08 '16 at 19:22

0 Answers0