CODEWITHSUNDEEP
javascripthtmlonclick
kjames
kjames

Reputation: 39

I can't get onclick to work

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! :)

Upvotes: 1

Views: 90

Answers (1)

Bitwise Creative
Bitwise Creative

Reputation: 4105

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>

Upvotes: 1

Related Questions