Почему querySelector () возвращает ноль, даже если класс существует? - PullRequest
Новая
       40

Почему querySelector () возвращает ноль, даже если класс существует?

0 голосов
/ 27 января 2019

Я прочитал об этом, и кажется, что селектор запросов не находит класс. Таким образом, возвращая ноль. Я попробовал последнее решение, представленное здесь: document.querySelector (…) является нулевой ошибкой и консоль не выдавала ошибок. Однако ничего не происходит. Пытаюсь

cosole.log(document.querySelector('wordImage');

не выводит никаких сообщений на консоль. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        .exa-title{
            font-style: italic;
            margin-left:10px;
            color: dimgray;
        }
    </style>
    <body>
        <img class="word-image"src="" alt="">
        <span class="ex-title"></span><span class="ex-sentence"></span>
        <input class="word-input" type="text" name="" autofocus>

<script>

window.addEventListener('load', init);

    const vocabularyList = [
      {
        image: "https://media.istockphoto.com/photos/red-apple-with-leaf-isolated-on-white-background-picture-id185262648?k=6&m=185262648&s=612x612&w=0&h=u9rMspGGTOkgUSzZ6INtT_Ww4NpGz9zHMGRmIJJjBqQ=",
        word: "apple",
        example: "The red apple."
      },
      {
        image: "https://upload.wikimedia.org/wikipedia/commons/8/88/Bright_red_tomato_and_cross_section02.jpg",
        word: "tomato",
        example: "The red tomato."
      }
    ];

function init(){
    //DOM  variables
    const wordImage = document.querySelector('word-image');
    const ex_title = document.querySelector('ex-title');
    const ex_sentence = document.querySelector('ex-sentence');
    const wordInput = document.querySelector('word-input');
    // Load the first object from the array
    showCard(vocabularyList);
    //Start matching on word input
    wordInput.addEventListener('input', matchWords);
}
// Pick and show random word

function showCard(vocabularyList){
    //Generate random array index
    const randIndex = Math.floor( Math.random() * vocabularyList.length);
    //Output the random word
    wordImage.src = vocabularyList[randIndex].image;

}

function matchWords(){
    if(wordInput.value === vocabularyList[randIndex].word){
        // ex_title.innerHTML = "p. ej.";
        ex_sentence.innerHTML = vocabularyList[randIndex].example;
    }
}

</script>


    </body>
</html>

1 Ответ

0 голосов
/ 27 января 2019

querySelector принимает CSS-селектор . Этот код использует селектор тега : 

const wordImage = document.querySelector('word-image');

То есть он ищет элемент с тегом word-image, например: 

<word-image>...</word-image>
Селектор

A class начинается с .: 

const wordImage = document.querySelector('.word-image');

См:

...