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>CodePudding user response：
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>CodePudding user response：
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?