JavaScript programming does not rely on using the onclick method to style HTML elements

Question

JavaScript programming does not rely on using the onclick method to style HTML elements

For a recent project, I was tasked with creating a toggle-style button setup for the challenge on CodePen. To achieve a 3D appearance for the button, I wrote some JavaScript code that utilized the onclick event.

var on = true
const green = document.getElementById('on')
const red = document.getElementById('off')
var greenOn = function() {
  if (on == false) {
    green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15) inset'
    red.style.boxShadow = 'none'
    var on = true;
  }
}
var redOn = function() {
  if (on == true) {
    green.style.boxShadow = 'none'
    red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15) inset'
    var on = false
  }
}

Here's the neatly bundled code snippet for your reference.

var on = true
const green = document.getElementById('on')
const red = document.getElementById('off')
var greenOn = function() {
  if (on == false) {
    green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15) inset'
    red.style.boxShadow = 'none'
    var on = true;
  }
}
var redOn = function() {
  if (on == true) {
    green.style.boxShadow = 'none'
    red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15) inset'
    var on = false
  }
}

.on {
  border-radius: 5px;
  background-color: lime;
  padding: 50px;
  border: none;
}
.off {
  border-radius: 5px;
  background-color: red;
  padding: 50px;
  border: none;
}
.switch {
  padding: 0;
  margin: 0;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="switch">
    <button class="on" id="on" onclick="greenOn()"></button>
    <button class="off" onclick="redOn()" id="off"></button>
  </div>
</body>

</html>

However, upon testing the implementation, nothing seems to happen when clicking the buttons. Any suggestions on how to fix this issue would be greatly appreciated!

javascript html css

Answer 1

Answer №1

Upon reviewing your code, I have identified two issues:

The first problem lies in how you are setting the variable on within your function. By re-declaring it as var on = true and var on = false, you are creating a new variable with function scope instead of changing the globally declared one. To resolve this, update it to simply on = false and on = true within their respective functions.
Additionally, the value that you are applying to the box-shadow property is not valid. Make sure to add a valid property value for the desired effect to take place.

var on = true;
const green = document.getElementById('on');
const red = document.getElementById('off');
var greenOn = function() {
  if (!on) {
    green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15)';
    red.style.boxShadow = 'none';
    on = true;
  }
}
var redOn = function() {
  if (on) {
    green.style.boxShadow = 'none';
    red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15)';
    on = false;
  }
}

.on {
  border-radius: 5px;
  background-color: lime;
  padding: 50px;
  border: none;
}
.off {
  border-radius: 5px;
  background-color: red;
  padding: 50px;
  border: none;
}
.switch {
  padding: 0;
  margin: 0;
}

<!DOCTYPE html> 
<html>

<head>
</head>

<body>
  <div class="switch">
    <button class="on" id="on" onclick="greenOn()"></button>
    <button class="off" onclick="redOn()" id="off"></button>
  </div>
</body>

</html>

Answer 2

Upon reviewing your code, I have identified two issues:

The first problem lies in how you are setting the variable on within your function. By re-declaring it as var on = true and var on = false, you are creating a new variable with function scope instead of changing the globally declared one. To resolve this, update it to simply on = false and on = true within their respective functions.
Additionally, the value that you are applying to the box-shadow property is not valid. Make sure to add a valid property value for the desired effect to take place.

var on = true;
const green = document.getElementById('on');
const red = document.getElementById('off');
var greenOn = function() {
  if (!on) {
    green.style.boxShadow = 'inset -3px 3px 13px 0px rgba(0,0,0,0.15)';
    red.style.boxShadow = 'none';
    on = true;
  }
}
var redOn = function() {
  if (on) {
    green.style.boxShadow = 'none';
    red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15)';
    on = false;
  }
}

.on {
  border-radius: 5px;
  background-color: lime;
  padding: 50px;
  border: none;
}
.off {
  border-radius: 5px;
  background-color: red;
  padding: 50px;
  border: none;
}
.switch {
  padding: 0;
  margin: 0;
}

<!DOCTYPE html> 
<html>

<head>
</head>

<body>
  <div class="switch">
    <button class="on" id="on" onclick="greenOn()"></button>
    <button class="off" onclick="redOn()" id="off"></button>
  </div>
</body>

</html>

Answer 3

Answer №2

Your code is experiencing issues due to re-declaring local variables with the same name as global variables:

var on = true
//...
var greenOn = function() {
  //...
  var on = true
}

When you redeclare on within the function, it creates a new local variable that shadows the global variable. This means the value is undefined and comparisons will fail.

if (on == true) {

To fix this issue, avoid redeclaring variables and simply assign their values instead:

if (on == true) {
  green.style.boxShadow = 'none'
  red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15) inset'
  on = false 
}

Additionally, remember to always terminate your statements with semi-colons in JavaScript to prevent common bugs caused by omission.

Answer 4

Your code is experiencing issues due to re-declaring local variables with the same name as global variables:

var on = true
//...
var greenOn = function() {
  //...
  var on = true
}

When you redeclare on within the function, it creates a new local variable that shadows the global variable. This means the value is undefined and comparisons will fail.

if (on == true) {

To fix this issue, avoid redeclaring variables and simply assign their values instead:

if (on == true) {
  green.style.boxShadow = 'none'
  red.style.boxShadow = '-3px 3px 13px 0px rgba(0,0,0,0.15) inset'
  on = false 
}

Additionally, remember to always terminate your statements with semi-colons in JavaScript to prevent common bugs caused by omission.

JavaScript programming does not rely on using the onclick method to style HTML elements

Answer №1

Answer №2

Similar questions

Display Content in a DIV When Form Field is Unfocused

AngularJS: ng-show causing flickering issue upon page refresh

Challenge with Angular *ngFor: Struggling to Access Previous Elements

Building User-Friendly Tabs with Twitter Bootstrap: Add or Remove Tabs and Content on the Fly

What is the best way to remove an item from an array?

What sets apart using `: Interface` versus `as Interface` in Typescript?

What issue arises with arrays when programming in JavaScript?

Do I require two bot logins for discord.js?

Is it possible for two node scripts running on the same machine to interfere with each other's execution

Troubleshooting VueJs and vue-i18n issues

Ways to utilize this node.js module within a specific file

Alter the content of an HTML page depending on whether a user is logged in two times on the same page

How can I position the hyperlink inline with the font-awesome Icon?

"Building a dynamic form with ReactJS, Redux Form, and Material UI - Implementing an

Adjusting image size to accommodate responsive column cell using CSS

What is the best way to adapt a wavetable for compatibility with the `OscillatorNode.setPeriodicWave` function?

Checking React props using Jest and Enzyme - A simple guide

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

Using the Map Function in React JS to Dynamically Render Radio Buttons with Material-UI

What's the difference between using find_all on a bs4.element.ResultSet object and a list in Beautiful Soup