Reputation: 3
I'm very new to javascript and I've been trying to develop something to assist me in teaching my class about binary encoders and decoders. This is the code that I've come up with:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pressme').click(function(){
var randomnumber = Math.floor(Math.random() * 8);
if(randomnumber == 0){
$('#i_1').removeClass.addClass('wire_inactive');
$('#i_2').removeClass.addClass('wire_inactive');
$('#i_3').removeClass.addClass('wire_inactive');
$('#o_0').removeClass.addClass('wire_active');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 1){
$('#i_1').removeClass.addClass('wire_active');
$('#i_2').removeClass.addClass('wire_inactive');
$('#i_3').removeClass.addClass('wire_inactive');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_active');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 2){
$('#i_1').removeClass.addClass('wire_inactive');
$('#i_2').removeClass.addClass('wire_active');
$('#i_3').removeClass.addClass('wire_inactive');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_active');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 3){
$('#i_1').removeClass.addClass('wire_active');
$('#i_2').removeClass.addClass('wire_active');
$('#i_3').removeClass.addClass('wire_inactive');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_active');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 4){
$('#i_1').removeClass.addClass('wire_inactive');
$('#i_2').removeClass.addClass('wire_inactive');
$('#i_3').removeClass.addClass('wire_active');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_active');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 5){
$('#i_1').removeClass.addClass('wire_active');
$('#i_2').removeClass.addClass('wire_inactive');
$('#i_3').removeClass.addClass('wire_active');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_active');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 6){
$('#i_1').removeClass.addClass('wire_inactive');
$('#i_2').removeClass.addClass('wire_active');
$('#i_3').removeClass.addClass('wire_active');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_active');
$('#o_7').removeClass.addClass('wire_inactive');
}
if(randomnumber == 7){
$('#i_1').removeClass.addClass('wire_active');
$('#i_2').removeClass.addClass('wire_active');
$('#i_3').removeClass.addClass('wire_active');
$('#o_0').removeClass.addClass('wire_inactive');
$('#o_1').removeClass.addClass('wire_inactive');
$('#o_2').removeClass.addClass('wire_inactive');
$('#o_3').removeClass.addClass('wire_inactive');
$('#o_4').removeClass.addClass('wire_inactive');
$('#o_5').removeClass.addClass('wire_inactive');
$('#o_6').removeClass.addClass('wire_inactive');
$('#o_7').removeClass.addClass('wire_active');
}
});
});
</script>
The goal is to switch the class of the input wires(labelled as i_0 to i_3) and output wires(labelled as o_0 to o_7 ) according to the number generated by the random number generator. However, when I click on the button(whose id I've set as pressme), I get uncaught TypeErrors. Can anyone please point me in the right direction in solving this?
Upvotes: 0
Views: 225
Reputation: 129782
removeClass
doesn't have a member named addClass
, so you can't write removeClass.addClass('')
. removeClass
is a function, and you have to invoke it:
$('#o_7').removeClass('wire_inactive').addClass('wire_active');
You can reduce all of your code to
// inactivate all
$('#o_0, #o_1, #o_2, #o_3, #o_4, #o_5, #o_6, #o_7').removeClass('wire_active').addClass('wire_inactive');
// activate random item
$('#o_' + randomnumber).removeClass('wire_inactive').addClass('wire_active');
... and apply similar logic for the i_
items; I'm not sure what your logic between toggling them on and off is...
Upvotes: 2