How can I access the text of my toggle switch in my javascipt file?

Question

I copied and adapted this toggleable switch off w3schools and the major change I made is the text that changes when toggled. How can I access the value of the text ('1x' and '2x') in my javascript file for an if statement (this can be also a console log just as an example)? I'm still new to CSS and HTML.

.switch{
  
  position: relative;
  display: inline-block;
  top: 33.75%;
  left: 35%;
  width: 148px;
  height: 37.5px;
  z-index: 1;
  border-width: 5px;
  /* visibility: hidden; */
  
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #10185c;
  border-radius: 5px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 29px;
  width: 29px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  color:#050A30;
  font-size: 18px;
  text-align: center;
  content: '1x';
  border-radius: 5px;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1e2a82;
}

input:checked + .slider:before {
  -webkit-transform: translateX(112px);
  -ms-transform: translateX(112px);
  transform: translateX(112px);
  content: '2x';
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <label class="switch">
      <input type="checkbox">
      <span class="slider"></span>
    </label>

    <script src="script.js"></script>

  </body>
</html>

You can't apply JavaScript if they are not in `DOM` as you are entering `2X` `1X` using `:before` which is not changing the `DOM` — Rana, Oct 14 '21 at 17:18

score 1 · Answer 1 · answered Oct 14 '21 at 17:30

1x and 2x are contents of the slider:before on your CSS styles and CSS:after and :before rules aren't part of the DOM, and therefore can't be altered using JavaScript's DOM methods.

so, you should change your text toggle switch method or use "checked" status of input for an if statement.

e.g.

<script>
    
        if (document.getElementById('input').checked) {
            alert("checked");
        } else {
            alert("You didn't check it! ");
        }
    
</script>

Thank you, That works perfectly too! – olaf Oct 14 '21 at 17:45 — olaf, Oct 14 '21 at 17:45

Ben Ripka · Accepted Answer · 2021-10-14T17:53:16.977

If all you want is to read the value of the text, and not alter it, you can get the computed styles and extract the content from there. This should work for your if statment. Try this example that prints it to the console on every switch:

.switch{
  
    position: relative;
    display: inline-block;
    top: 33.75%;
    left: 35%;
    width: 148px;
    height: 37.5px;
    z-index: 1;
    border-width: 5px;
    /* visibility: hidden; */
    
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #10185c;
    border-radius: 5px;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 29px;
    width: 29px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    color:#050A30;
    font-size: 18px;
    text-align: center;
    content: '1x';
    border-radius: 5px;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #1e2a82;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(112px);
    -ms-transform: translateX(112px);
    transform: translateX(112px);
    content: '2x';
  }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="./style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <label class="switch">
    <input type="checkbox" id="checkbox">
    <span class="slider"></span>
  </label>

  <script>
    const printContent = () => {
      let slider = document.querySelector('.slider')
      let computedStyle = getComputedStyle(slider, ":before")
      let text = computedStyle.getPropertyValue('content')
      console.log(text)
    }
    document.getElementById("checkbox").onclick = printContent
  </script>

</body>

</html>

See this post about How to get a DOM element's ::before content with JavaScript?

Thank you! this works better thank the true and false check. — olaf, Oct 14 '21 at 17:52

How can I access the text of my toggle switch in my javascipt file?

2 Answers2