Copié y adapté este interruptor alternable de w3schools y el cambio principal que hice es el texto que cambia cuando se alterna. ¿Cómo puedo acceder al valor del texto ('1x' y '2x') en mi archivo javascript para una declaración if (esto también puede ser un registro de consola solo como ejemplo)? Todavía soy nuevo en CSS y 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>1x y 2x son contenidos del control deslizante: antes en sus estilos CSS y las reglas CSS: después y: antes no forman parte del DOM y, por lo tanto, no se pueden modificar utilizando los métodos DOM de JavaScript.
por lo tanto, debe cambiar su método de cambio de alternancia de texto o usar el estado de entrada "marcado" para una declaración if.
p.ej
<script> if (document.getElementById('input').checked) { alert("checked"); } else { alert("You didn't check it! "); } </script>Si todo lo que desea es leer el valor del texto y no modificarlo , puede obtener los estilos calculados y extraer el contenido de allí. Esto debería funcionar para su declaración if. Pruebe este ejemplo que lo imprime en la consola en cada interruptor:
.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>Vea esta publicación sobre ¿Cómo obtener un elemento DOM :: antes del contenido con JavaScript?