Nie pokazuje mi się nic z pliku js mimo że ścieżki są dobre

0 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width",
        initial-scale=1.9" />
        <title>Color flipper</title>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>

        
        
        <nav>
            <div class="nav-center">
                <h1>color flipper</h1>
                <ul class="nav-links">
                    <li>
                        <a href="index.html">simple</a>
                    </li>
                    <li>
                        <a href="hex.html">chfw dfwafaa</a>
                    </li>
                    <li>
                        <a href="sf3">

                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <main>
            <div class="container">
                <h2>background color: <span class="color">#f15025</span></h2>
                <button class="btn btn-hero" >clickMeHAHAHA</button>
            </div>
        </main>
        <script src="script.js" type="module"></script>
    </body>
</html>


const btnColorGenerate = document.querySelector('.btn btn-hero')
btnColorGenerate.addEventListener('click', function(){
    console.log('working');
})
console.log('x');
const colors = ['#845EC2', '#40246D']


function getRandom(){
    return Math.random();
}

Hej mam problem z jsem nie wyświetla mi się nic na stronce poza komunikatem w konsoli

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:3:18

pomoże ktoś?

2

Przyglądnij się temu przykładowi: https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector#examplepowerful
Podajesz niepoprawnie selektor.

3
life_player napisał(a):

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:3:18

Po nitce do kłębka. Masz w kodzie:

btnColorGenerate.addEventListener

i skoro wyswietla ci sie ten błąd Cannot read properties of null (reading 'addEventListener')
to mozesz wywnioskowac z tego, że btnColorGenerate jest null.

Sprawdzasz, co masz wczesniej:

const btnColorGenerate = document.querySelector('.btn btn-hero')

I jeśli btnColorGenerate jest null, to znaczy, że document.querySelector('.btn btn-hero') zwrocilo null.

I na tym etapie już widac, że tytuł wątku jest zły. Nie mgliste Nie pokazuje mi się nic z pliku js mimo że ścieżki są dobre, tylko querySelector zwraca null .

Ale dlaczego zwraca null? Bo kropka powinna się znaleźc przed kazda klasą w querySelector (rowniez przed btn-hero), a nie tylko przed tą pierwszą. Oraz nie powinno byc tam spacji, jesli chcesz zawęzic selekcję.

0 

const btnColorGenerate = document.querySelector('.btn-btn-hero');
const btnGenerateNickname = document.querySelector('.btnGenerate');
const btndemo = document.getElementById('demo');

const squareBackground  = document.querySelector('.square');
const colors = ['red', 'blue', 'yellow', 'green', 'silver'];
const abc = ['a', 'b', 'c', 'd'];
let numbColor = 0;
let numbNick = 0;

btnColorGenerate.addEventListener('click', function(){    
    x();
    console.log('work cologener');
})



function x(){
    if(numbColor >= colors.length) {
        numbColor = 0;
    }
    squareBackground.style.background = colors[numbColor];
    numbColor++;
}

function keySpacebar(){

    window.addEventListener('keydown', function(event){
        if(event.defaultPrevented) {
            return;;
        }

        var handled = false;
        if(event.key !== 32) {
            x();
            console.log('dwada');
            
        }
        else if(event.keycode = undefined) {
            console.log('fsadas');
        }

        if(handled) {
            event.preventDefault();
        }
    }, true)

}

keySpacebar();

//functions generate nickname


btnGenerateNickname.addEventListener('click', function(){
    generateNick();
    console.log('xxw')
})

function generateNick(){
    if( numbNick >= abc.length){
        numbNick = 0;
    }
    console.log('x');

}

function generator(min, max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

let cs = generator(2,19);
console.log(cs);




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width",
        initial-scale=1.9" />
        <title>Color flipper</title>
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
  

        
            <div class="center-site">
                <div class='shadow-main'>
                    <nav>
                        <div class="nav-center">
                            <h1>color flipper</h1>
                            <ul class="nav-links">
                                <li>
                                    <a href="index.html">simple</a>
                                </li>
                                <li>
                                    <a href="hex.html"><br>Generator nicków</a>
                                </li>
                                <li>
                                    <a href="hex.html">sad</a>
                                </li>
                                <li>
                                    <a href="hex.html">asd</a>
                                </li>
                                <li>
                                    <a href="dwad">

                                    </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <main>
                       
                        <p id="demo">X:</p>
                    </main>
                    
                    <div class="spaceGenerateNickname">
                        <button class="btnGenerate1">test</button>
                        <button class="btnGenerate">Generuj</button>
                        <div class="nickname">Nickname: </div>
                    </div>
                    
                </div>
                
            </div>
 
         <script src="script.js" type="module"></script>
    </body>
</html>

ten btnColorGenerate działa ale w konsolce dalej ten sam bład

script.js:12 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:12:18

const btnColorGenerate = document.querySelector('.btn-btn-hero');


btnColorGenerate.addEventListener('click', function(){    
    x();
    console.log('work cologener');
})

Zrobiłem podstronę z generatorem nicków i dalej ten błąd jest, a przecież selectory już są w porządku kropka jest, a button nie działa

const btnGenerateNickname = document.querySelector('.btnGenerate');

btnGenerateNickname.addEventListener('click', function(){
    generateNick();
    console.log('xxw')
})
0

@life_player: Jako, że ślepy jestem, to skorzystałem z opcji "znajdz" w przeglądarce i ... -> gdzie w kodzie html masz klasę square?
Bo masz zapytanie querySelector('.square'), ale w kodzie html nigdzie tej klasy nie mogę znaleźć.
Hmm? To takie spostrzeżenie tylko na początek.

edit:
Bo zauważyłem, że wywołujesz funkcję x w przycisku btnColorGenerate, ale w implementacji funkcji x masz
wiersz:

squareBackground.style.background = colors[numbColor];

a przecież w kodzie html nie ma nigdzie klasy "square". Co prawda nie ogarniam jeszcze całości, ale wydaje mi się, że
jeśli wrzuciłeś tu rzeczywiście cały kod, to nie będzie Ci działać choćby właśnie z tego powodu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1