Issues making buttons work with JS

1

Tell us what’s happening:
I can not make a HTML button do anything . I am trying to make it change the background color of a div element and I am failing at this for longer then I wish to admit. The important bit for everything down is a little bit of html and the js. I also included the css for reference just in case it’s needed.

Your code so far
$(document).ready(function(){

var percentChance = 50;
var sp = "";
var tl = 0;
var trial = 1;
var dish1count = [];
var dish2count = [];
var report = [];



$('#button_one').on({'click': function(){
 		
 	// change color
	document.documentElement.style.cssText = "--color: green");
		
});

});


<body>

	<h1>Scientific method</h1>	
	<div class="grid-container0">
		<p>Set parameters for each dish.</p>
	</div>
	<div class="grid-container1">
		<div class="item-1">
  			<button id="button_one" class="button">Humid</button> <br>
  			<button id="button_two" class="button">Dark</button>
		</div>
		<div class="left_circle" id="left_circle">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<h2>4</h2>
		</div>
		<div class="right_circle" id="right_circle">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<img src="images/pillbug.png" id="pic_two" alt="petri_dish" class="pic_two">
			<h2>4</h2>
		</div>
		<div class="item-4">
			<button id="button_three" class="button">Humid</button> <br>
			<button id="button_four" class="button">Dark</button>
		</div>
	</div>
		<div class="grid-container2">
		<p> Click button to save and continue</p>
		<div class="item-5">
  			<button id="button_five" class="button_five">Add a minute</button>
		</div>
	</div>

</body>
</html>

--CSS
:root {
	--color: white;
}


* {

	font-family: helvetica;
	font-size: 1em;

}

body {
	margin: 30px 0px;
	background-color: #999;
	text-align: center;
}

h1 {
	color: blue;
	text-align: center;
	font-size: 50px;
}

h2 {
	color: yellow;
	alpha: 50%;
	font-size: 50px;
	text-align: center;
	opacity: 0.4;
}

.grid-container0 {
  display: grid;
  grid-template-columns: auto 300px 300px auto;
  background: blue;
  margin: 0% 20%;
  text-align: center
}

.grid-container1 {
  display: grid;
  grid-template-columns: auto 300px 300px auto;
  background: linear-gradient(blue, lightblue);
  margin: 0% 20%;
  text-align: center
}

.grid-container2 {
  display: grid;
  background: lightblue;
  margin: 0% 20%;
}

p {
	text-align: left;
	margin-left: 20px;
}

.left_circle {
  height: 300px;
  width: 300px;
  background-color: var(--color);
  border-radius: 50%;
  border-style: solid;
}

.right_circle {
  height: 300px;
  width: 300px;
  background-color: var(--color);
  border-radius: 50%;
  border-style: solid;
}

.button {
	margin: 20px;
}

.button_five {
	margin: 20px;
	background-color: orange;
	padding: 10px;
}



**Your browser information:**

Google Crome
2

It looks like you are using jQuery. That’s not quite how you use the on function to attach an event handler to a button. See the examples on the documentation:

https://api.jquery.com/on/

3

Yes to jQuery
I have changed it to look like the sample in the link you provided and added an alert but it still doesn’t seem to be working. I don’t see what I am doing wrong. I have also tried several other ways to make it work but the button never does anything.

$("#buttion_one").on( "click", function() {
 		
 	// change color
	document.documentElement.style.setProperty("--color", "green");
	alert( "clicked" );
		
});
4

I think we will need to a link to your entire code base before we can go any further. Do you have this somewhere we can look at it?

Also, I just noticed that there is a syntax error in the original code you posted:

document.documentElement.style.cssText = "--color: green");

Do you see the problem here?

UPDATE: I see you fixed it in the snippet you just posted, so ignore that.

5

It did not fix it and I am putting it on Github now and will share the link in a min. thanks

6

I suggest you create a function and use the conditional statement inside then you can attach that function to your button. onClick of the button the function fires

7
8

Two things in button_script.js:

  • You’ve got an errant right curly brace on line 38
  • Look closely at the ID you are using to set the click handler on line 25
9

Wow bbsmooth the ID fixed it and I feel so dumb. Thanks for the help!!