Скрипт работает в html, но не вовне

Я новичок в этой игре, и я пытаюсь создать веб-сайт, используя новые приемы по ходу дела.

Я кодирую набор кнопок вместо того, чтобы переходить на другую страницу, всплывающее окно (модальное, я думаю, это называется?)

это хорошо работает, когда у меня есть весь скрипт в HTML, но не будет работать для меня, когда я помещаю код извне.

В НАСТОЯЩЕЕ ВРЕМЯ РАБОТАЕТ ТОЛЬКО НА КНОПКЕ О КОМПАНИИ

var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if (event.target === modal) {
        modal.style.display = "none";}}

*
{
margin: 0;
padding: 0;
}

header
{
background-image: url("../images/webBack.jpg");
    background-color: powderblue;
    height: 100vh;
    background-size: cover;
    background-position: center;


}
a{
    color: black;
}
a:hover{
    color:white;
    transition-duration: 0.3s;

}
.row{
    position: center;
    max-width: 95%;
    margin: auto;


}

.logo img{
    width: 150px;
    height: auto;
    float: left;
}
.main-nav{
    float:right;
    list-style:none;
    margin-top: 30px;

}
.main-nav li{
    display: inline-block;
}

.button1 {
    background-color: cornflowerblue;
    opacity: 0.2;
    font-size: 16px;
    text-align: center;
    padding: 14px 28px;
    border: 2px solid black;
    transition-duration: 0.2s;
    cursor: pointer;
}
.button1:hover{
    background-color: cornflowerblue;
    color: white;
    opacity: 1;
    font-size: 18px;

}
.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content{
    background-color: aliceblue;
    margin-top: 150px;
    margin-left: 25%;
    padding: 20px;
    border: 2px solid whitesmoke;
    width: 50%;
    height: 50%;
    overflow: auto;
}
.close{
    color: gray;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
body{
    font-family: monospace;

}

.Hero{
    position: absolute;
    margin: 500px;
    margin-left: 25%;
    margin-top: 0;
    pointer-events:none;
}

h1{
    color:white;
    text-transform: uppercase;
    font-size: 60px;
    text-align: center;
    margin-top: 275px;

}
p{
    color: black;
    font-size: 16px;

}

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel = "stylesheet" href = "scripts/Portia.css">
</head>
<body>
    <header>
        <div class = "row">
            <div class = "logo">
                <img src = "images/Logo.png">
            </div>
    <script src = "scripts/main.js"></script>
            <ul class = "main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id = "about" class = button1>About</button></li>
                <li><button class = button1><a href = ""> What is? </a></button></li>
                <li><button class = button1><a href = ""> Contact </a></button></li>
                <li><button class = button1><a href = ""> FAQ </a></button></li>
            </ul>
        </div>
        <div class = "Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id = "aboutMod" class = "modal">
        <div class = "modal-content">
            <span class = "close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>

</body>
</html>

в сниппете работает...

Я использую IntelliJ

может что-то в HTML? Я не могу понять это.

Что вы имеете в виду под will not work for me when I put the code externally? Как вы пытаетесь включить код и что происходит не так (вы видите ошибки, зарегистрированные в консоли и т. д.)?

— 14.03.2019 23:29

javascript html css intellij-idea

14.03.2019 23:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы ссылаетесь на свой сценарий до того, как элементы существуют. Просто ссылайтесь на скрипт после того, как они существуют. Попробуйте поместить тег script над тегом end body. Я проверил ваш код, и это работает.

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel = "stylesheet" href = "scripts/Portia.css">
</head>
<body>
    <header>
        <div class = "row">
            <div class = "logo">
                <img src = "images/Logo.png">
            </div>
            <ul class = "main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id = "about" class = button1>About</button></li>
                <li><button class = button1><a href = ""> What is? </a></button></li>
                <li><button class = button1><a href = ""> Contact </a></button></li>
                <li><button class = button1><a href = ""> FAQ </a></button></li>
            </ul>
        </div>
        <div class = "Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id = "aboutMod" class = "modal">
        <div class = "modal-content">
            <span class = "close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>
    <script src = "scripts/main.js"></script>
</body>
</html>

В качестве альтернативы вы можете указать своему JS выполняться после того, как страница будет готова, если вы хотите оставить тег скрипта там, где он есть. Хотя приведенный ниже код может быть не полностью совместим с разными браузерами, вы также можете сделать это с помощью Jquery вместо чистого javascript, который определенно должен быть совместим с разными браузерами.

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if (event.target === modal) {
        modal.style.display = "none";}}
        });

Если вы решите включить Jquery в свой HTML, вы можете сделать это.

$( document ).ready(function() {
        var modal = document.getElementById("aboutMod");
    var btn = document.getElementById("about");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function(){
        modal.style.display = "block";}
    span.onclick = function (){
        modal.style.display = "none";}
    window.onclick = function (event){
        if (event.target === modal) {
            modal.style.display = "none";}}
});

Если вы хотите попробовать решение jquery, просто поместите его между тегами заголовка.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

14.03.2019 23:30

Другие вопросы по теме

Как исключить только типы файлов .doc, .docx, .txt и .rtf в диалоговом окне файла

Какой смысл заключать имена классов CSS в скобки в HTML?

Как отобразить результат sql с помощью node js

Метод в twig для замены «include» в php

Найдите все аудиофайлы рекурсивно и воспроизведите их в случайном порядке

Как я могу заставить Django view.py запрашивать информацию о выбранных сообщениях, такую как первичный ключ?

Выпадающее меню css, перемещающее содержимое страницы

Создать контур текста для ввода текста

Как содержать в относительном родительском контейнере абсолютный дочерний элемент

Мне нужно фильтровать изображения без javascript или div:/

Скрипт работает в html, но не вовне

Ответы 1

Другие вопросы по теме

Похожие вопросы