как использовать тумблер JS - PullRequest
Новая
       1

как использовать тумблер JS

0 голосов
/ 13 июня 2019

Я пытаюсь переключить значение с помощью ползунка в html, вот что я сделал: html файл: 

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script scr="./scripts.js" type="text/javascript"></script>
</head>
<body style="font-family: Calibri; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px;">
<div id="myDIV">Hello</div>

        <h2> Testing switch:
                <label class="switch">
                  <input id="status" type="checkbox" checked>
                  <span class="slider round" ></span>
              </h2>


</body>

и вот код scripts.js, который я использую: 

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked ==true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}

Я не понимаю, чего мне не хватает, но перемещение слайда не меняет текст!Любая идея, как я могу решить это?заранее спасибо !

обновление

слайдер основан на w3-schools Пример

Ответы [ 4 ]

2 голосов
/ 13 июня 2019

Вам нужно как-то запустить свою функцию. Он не запускается автоматически. В приведенном ниже примере это исправлено путем запуска myFunction, когда флажок изменяет значение с помощью атрибута onChange. 

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked == true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./layout.css">
  <script scr="./scripts.js" type="text/javascript"></script>
</head>

<body style="font-family: Calibri; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 100; line-height: 26.4px;">
  <div id="myDIV">Hello</div>
  <h2> Testing switch:
    <label class="switch">
    <input id="status" type="checkbox" checked onChange="myFunction(this)">
    <span class="slider round" ></span>
  </h2>
</body>
1 голос
/ 13 июня 2019

Добавление следующей строки в ваш скрипт заставит пользовательский ввод вызвать вашу функцию. 

document.getElementById("status").addEventListener("change", myFunction});
1 голос
/ 13 июня 2019

Когда вы нажимаете на переключатель, ничего не происходит, потому что вы не привязали к нему никаких действий.Вы можете добавить один, связав функцию onchange: 

function myFunction() {
  var x = document.getElementById("myDIV");
  var isChecked = document.getElementById("status");
  if (isChecked.checked == true) {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}
body {
  font-family: Calibri;
  font-size: 24px;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  line-height: 26.4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<body>
  <div id="myDIV">Hello</div>

  <h2> Testing switch: </h2>
  <label class="switch">
  <input id="status" type="checkbox" onChange="myFunction(this)" checked>
  <span class="slider round"></span>
  </label>
</body>
0 голосов
/ 13 июня 2019

В качестве альтернативы предлагаемым решениям, которые являются правильными, таким образом вам не нужно получать элементы каждый раз, когда флажок меняется. 

const x = document.getElementById("myDIV");
const checkbox = document.getElementById("status")

checkbox.addEventListener("click", (el) => {
	el.target.checked
    ? x.innerHTML = "Swapped text!"
    : x.innerHTML = "Hello";
})
<div id="myDIV">Hello</div>

<h2> Testing switch:
  <label class="switch" />
  <input id="status" type="checkbox">
  <span class="slider round" ></span>
</h2>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...