Как открыть новое окно с файлом PDF при включении тумблера
Я хочу открыть новую веб-страницу с pdf, когда вы нажмете тумблер. Но она не открылась, и я старался изо всех сил. Пожалуйста, скажите мне, как это сделать. например, я хочу открыть css pdf, когда вы нажмете тумблер, а затем, когда вы выключите тумблер, окно pdf будет закрыто.
<script type = "text/javascript">
document.getElementsClassName('switch').addEventListener("change",function(){
if (this.checked) window.open("PDFS/CSS.pdf");
});
</script>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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);
}
</style>
<h2>Toggle Switch</h2>
<label class = "switch">
<input type = "checkbox"/>
<div class = "slider"></div>
</label>
я пробовал с событием onchange, это тоже не сработало. Как я могу это сделать, братан.
А вы уже пробовали click?
Я пробовал как onclick = click(); функция в коде javascript
Попробуйте addEventListener('click', function()... вместо addEventListener('change', function()....
Пожалуйста, скажите мне, что это полезно для меня, если оно будет выполнено.
Событие change внутри вашего eventListener должно работать. Вы пробовали?
Я пробовал щелкнуть и изменить события, братан, если у вас есть какой-либо код по этому поводу, пришлите мне
А что случилось, когда вы попробовали click или что-то еще? Есть ошибки в вашей консоли JavaScript? (нажмите F12, затем перейдите в «консоль»)
он показывает, что document.getElementsByClassName(..).addEventListener(...) не является функцией
Ах, я не видел проблемы все время. Добавьте [0] после getElementsByClassName('switch').
Я делаю в netbeans, потому что здесь нет интернета для установки реакции. Это центральное правительство.
В порядке. Вы добавили [0]? Это сработало?
я сделал на JavaScript
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У меня есть для вас простое решение. Сделайте это в Jquery.
измените свой div с:
<div class = "slider"></div>
К:
<div class = "slider" id = "slider"></div>
И в вашем скрипте удалите свой код и поместите это:
$(document).ready(function(){
$('#slider').click(function(){
window.open('CSS.pdf', '_blank', 'fullscreen=yes');
});
});
P.S - не забудьте добавить расширение jquery и в css.pdf поместить файл с именем pdf:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jQuery не является решением для всего, и я думаю, что это излишество для этой простой задачи. Кроме того, OP застрял на этой простой задаче, поэтому введение им библиотеки может еще больше запутать их. Они должны сначала изучить JS на хорошем уровне.
Кроме того, добавление идентификатора к элементу и получение элемента по указанному идентификатору будет очень хорошо работать и с простым JS.
Я предполагаю, что ваше событие изменения не срабатывает. Попробуйте что-нибудь вроде
click.