I can't get onclick to work

Question

I'm very new to HTML/CSS/Java, so I'm hoping some of you can help me figure out why my onclick events are not working!

Here's my HTML code (the problematic onclick events are in the divs below the h3 tag, near the bottom of the wrapper div):

<title>My Very First Webpage</title>

<link rel = "stylesheet" type="text/css" href = "1-sheet.css">

<script src = "1-math.js"></script>

<div id = "headerDiv">
    <h1> Math! </h1>
</div>

<div id = "wrapperDiv">
  <div id = "navDiv">
    <div id = "navButtonDiv" class = "buttonDiv"> <a href = "1-home.html"> Home! </a> </div>
    <div id = "navButtonDiv" class = "buttonDiv"> <a href = "1-math.html"> Math! </a> </div>
    <div id = "navButtonDiv" class = "buttonDiv"> <a href = "1-links.html"> Cool Links! </a> </div>
    <div id = "navButtonDiv" class = "buttonDiv"> <a href = "1-videos.html"> Videos! </a> </div>
    <div id = "navButtonDiv" class = "buttonDiv"> <a href = "1-unknown.html"> ??? </a> </div>
  </div>

  <h3> Enter a list of numbers and find its mean, median, and mode! </h3>
  <div id = "enterNumbers" class = "buttonDiv" onclick = "getNumbers()"> Enter numbers </div>
  <div id = "mathButtonDiv" class = "buttonDiv" onclick = "mean()"> Mean </div>
  <div id = "mathButtonDiv" class = "buttonDiv" onclick = "median()"> Median </div>
  <div id = "mathButtonDiv" class = "buttonDiv" onclick = "mode()"> Mode </div>

</div>

And here's the linked JS file (its file name is "1-math.js", so it matches with the script tag above):

var nums = "";
function getNumbers()
{
  nums = prompt("Enter a list of numbers separated by commas", "Put numbers here");
}


//incomlete

function mean(var numbers)
{
  document.write("mean");
}

function median(var numbers)
{
  document.write("median");
}

function mode(var numbers)
{
  document.write("mode");
}

Thanks for any help you can provide! :)

Try removing `var numbers` within the function arguments, ie. `function mean(var numbers)` becomes `function mean()` Why did you put that in there to begin with? — mferly, May 26 '16 at 21:46
Look at the Console in your browser's developer tools. It will point out your syntax errors. http://jshint.com/ will do that do (possibly more clearly). — Quentin, May 26 '16 at 21:46
Using `document.write` after the page loaded will wipe out the entire document and replace it with what is passed as parameter. Change your `document.write` calls to `console.log`. — Igor, May 26 '16 at 21:46
Some info about [document.write](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — TylerH, May 26 '16 at 21:48
"*why my onclick events are not working!*" And *what's* not working exactly? Better to hear it from the horse's mouth. I'm assuming when you click one of the `div`'s that it's simply *writing* out what's in the function to the screen? — mferly, May 26 '16 at 21:51
There is plenty that is good in http://www.w3schools.com/js/default.asp — dcromley, May 26 '16 at 22:07

Bitwise Creative · Accepted Answer · 2016-05-26T21:59:47.327

First, use your browser console to view errors and such (usually F12).

The error was because you were using var numbers in your function params instead of just numbers.

This fiddle might help (shows proper function params, use of console.log, and passing nums to the onclick event functions):

https://jsfiddle.net/1jkzhxgd/

And here's an inline code snippet with the same thing (although it's harder to use with the inline console.log output...)

var nums = "";
function getNumbers() {
    nums = prompt("Enter a list of numbers separated by commas", "Put numbers here");
}
function mean(numbers) {
    console.log('mean', numbers);
}
function median(numbers) {
    console.log('median', numbers);
}
function mode(numbers) {
    console.log('mode', numbers);
}

<div id="headerDiv">
    <h1> Math! </h1>
</div>

<div id="wrapperDiv">
    <h3> Enter a list of numbers and find its mean, median, and mode! </h3>
    <div id="enterNumbers" class="buttonDiv" onclick="getNumbers()"> Enter numbers </div>
    <div id="mathButtonDiv" class="buttonDiv" onclick="mean(nums)"> Mean </div>
    <div id="mathButtonDiv" class="buttonDiv" onclick="median(nums)"> Median </div>
    <div id="mathButtonDiv" class="buttonDiv" onclick="mode(nums)"> Mode </div>

</div>

I can't get onclick to work

1 Answers1