Блог

Главная - Вопросы по программированию - Почему мой javascript перестает работать при размещении?

Почему мой javascript перестает работать при размещении?

#javascript #html #animation #scripting #hosting

Вопрос:

Когда html-файл запущен, он отлично работает! Когда я загружаю его в свой домен dreamhost, кнопки перестают работать, и изначально скрытые теги внезапно становятся видимыми. У меня та же проблема на другой странице, jquery, кажется, просто перестает работать, когда я на самом деле размещаю свои файлы. div «rainDesc» и h3 под должны исчезнуть.

Я использую bootstrap и animejs.

HTML

 <html>
    <head>
        <title>Relax...</title>
        <link href="StyleSheet.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
    </head>

    <body>
        <div class="rainContent">
            <video id="rainVideo" src="Rain falling on windshield.mp4"></video>
        </div>
        <div class="greeting">
            <h1 class="display-2">Let's create the mood...</h1>
            <small class="text-muted">Just relax</small>
        </div>
        <div class="rainDesc">
            <h3>You're in a warm car, the gentle rain falling on the windshield is soothing...</h3>
        </div>
        <div class="medType">
            <button id="rain" type="button" class="btn btn-light">Rain</button>
            <button id="zen" type="button" class="btn btn-light">Zen</button>
            <button id="sun" type="button" class="btn btn-light">Sun</button>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="app.js" text="script"></script>
    </body>
</html>

Язык JavaScript

 var greeting = document.querySelector('.greeting')
var rainDesc = document.querySelector('.rainDesc')

window.onload = function(){
    Rainvideo.style.display = 'none'
    rainDesc.style.display = 'none'
    anime({
        targets: Rainvideo,
        opacity: 0
    })
    anime({
        targets: rainDesc,
        opacity: 0
    })
}

document.getElementById("rain").onclick = function(){

    Rainvideo.style.display = 'block'
    Rainvideo.play();
    Rainvideo.loop = true;
    rainDesc.style.display = 'block' 

    anime({
        targets: Rainvideo,
        opacity: 1,
        duration: 10000
    })

    anime({
        targets: rainDesc,
        opacity: 1,
        duration: 10000
    })

    anime({
        targets: greeting,
        translateY: -150,
        duration: 5000
    })
}

Я вынул jquery, но все равно он, похоже, не работает. Любая помощь будет признательна.

Комментарии:

1. Есть ли сообщения об ошибках в консоли?

2. Попробуйте поместить теги скрипта в часть заголовка, которые предназначены для требуемых библиотек js. Сохраняйте app.js ниже, но переместите других в голову.

3. Где это определено Rainvideo ?

4. сообщение об ошибке Неперехваченная синтаксическая ошибка: Неожиданный токен «var». Говорит, что это на 42-й строке, последней строке. Еще более запутанно, потому что все скобки проверяются

5. Rainvideo находится в папке

Метки: