Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marshal Currier
Marshal Currier
6,416 Points

Javascript onclick()="questionCheck()" wont call function or pass variables.

Here is the code I have at the moment. You can see it live on a server here: http://marshalcurrier.com/quizes/

I am trying to build a quiz program that offers 1 question at a time and I cant get the buttons to submit to the questionCheck() function. I have even taken out all of the code and just have a document.write() in place to post "test" which never appears on the screen. I have spent a few hours on this same problem with no success.

I will likely be making changes after I asked this question so I posted the code as it is at this moment. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style>
.questionBox{margin:10px; background: #b6fcd5; border: solid #8dcd91 2px; padding:10px; max-width:340px;min-width:340px; border-radius: 5px; margin-right:auto;margin-left:auto;}
button{margin:10px; max-width:300px;min-width:300px;}
.questionHeader{text-align: center;font-weight: bold;}
</style>
<script>
var correctAnswers =0;
var randomItem; 
var selected;
var selectedQuestion;
var questionArray=[[
    ['What do you do at a red light?'],
        ['Drive fast so you dont get the red light.',0],
        ['Stop',1],
        ['Run over the guy in the crosswalk', 0],
        ['Bump Taylor Swift till you feel better',0]],
    [['Can you pass in a schoul zone?'],
        ['Yes.',0],
        ['No',1],
        ['Run them kids over!', 0],
        ['Remember back to the good ole days.',0]
    ],
    [['How fast do you drive on the freeway?'],
        ['There\'s a limit?',0],
        ['65 Miles Per Hour',1],
        ['42', 0],
        ['Faster than the guy behind you.',0]
    ]
]
var callQuestion = function(number){
    document.write('<div class="questionBox">');
    document.write('<div class="questionHeader">'+questionArray[number][0]+'</div>');
    document.write('');
    for(var i2 =1;i2<=4;i2+=1){
        document.write('<button type="button" class="btn btn-info" value="Submit" id="answer" onclick()="questionCheck()">'+questionArray[number][i2][0]+'</button><br>');
    }
    document.write('');
    document.write('</div>');
    selectedQuestion = i2;
}
var randomQuation = function(){
    var randomArrayItem = [Math.floor(Math.random() * questionArray.length)];
    return randomArrayItem;
}
var questionCheck = function(){
    document.write("test");
    /*var answer = document.getElementById('answer');
    if (questionArray[randomItem][answer][1] == 1){
        array.splice(questionArray[randomItem], 1 );
    }*/
}
randomItem = randomQuation();
document.write(questionArray.length);
document.write(randomItem);
callQuestion(randomItem);



</script>

1 Answer

Trevor Austin
Trevor Austin
8,153 Points

Hey there, You are dynamically adding this to your button element: onclick()="questionCheck()">

onclick()= is not proper HTML syntax. To call a function on button you use: onclick="function()"

I hope this helps. onclick=, "click", and onclick() are all very tricky.

Marshal Currier
Marshal Currier
6,416 Points

My god... I have literally been working on this for days. At least an hour a day sense Thursday.

Do you have a link that can tell me the difference? Or is "onclick()=" not a thing?

Thank you so much for helping there. It really is appreciated!

Trevor Austin
Trevor Austin
8,153 Points

Hey Marshal, onclick()= is not a thing.

onclick="" is used in HTML as a DOM event, like on < button> tags. example:

<button type="button" onclick="myFunction()">

onclick() is used in JavaScript as a function. example: (function inside of the onclick function)

variableName.onClick = function () { window.alert('Hello!'); };
}

and then we also have addEventListeners in JavaScript written as .addEventListener("click", function). example:

variableName.addEventListener("click", myFunction);

I hope this helps! -Trevor