Ни jQuery .text (), ни JavaScripts .innerText не работают? - PullRequest
Новая
       1

Ни jQuery .text (), ни JavaScripts .innerText не работают?

1 голос
/ 10 января 2020

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

  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        //What I tried with jQuery
        console.log("Content: " + $('p').text());

        //What I tried with JavaScript
        var text = document.getElementsByClassName('test').item(0);
        console.log(text.innerText);

        //This returns the HTMLCollection object, text[0] is undefined
        var text = document.getElementsByClassName('test');
        console.log(text);
    </script>
  </head>

  <body>

    <p class="test">Hello World!</p>

  </body>


//What I tried with jQuery
console.log("Content: " + $('p').text());

//What I tried with JavaScript
var text = document.getElementsByClassName('test').item(0);
console.log(text.innerText);

//This returns the HTMLCollection object, text[0] is undefined
var text = document.getElementsByClassName('test');
console.log(text);
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<p class="test">Hello World!</p>

Здесь я уже пытаюсь использовать jQuery вместо JavaScript, потому что это, кажется, проще в использовании. Но если я зайду на свой веб-сайт (локально), он напечатает только Content: внутри консоли (JavaScripts .innerText вернет undefined).

Если это важно: я использую Ubuntu 19.10 для разработки и тестирования своего веб-сайта.

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Вам нужно дождаться загрузки страницы (DOM) перед запуском скрипта. Как я понимаю, ваш скрипт запускается до того, как будет создан элемент абзаца (<p>).

Вы можете:

1) Сделать так, чтобы код запускался, как только страница получила загружен. (рекомендуется) ... или

2) Переместите скрипт после тега абзаца (<p>).

Метод 1 

// jQuery
$(document).ready(function() {
    console.log("Content: " + $('p').text());
});

// JavaScript
document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
  var text = document.getElementsByClassName('test').item(0);
  console.log(text.innerText);
});

Метод 2 : Пожалуйста, обратитесь к ответу @ Edit .

1 голос
/ 10 января 2020

Ваш сценарий должен быть внизу вашего тела. Вот результат: 

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

<head>
  <title>Test</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>

  <p class="test">Hello World!</p>
  <script>
    //What I tried with jQuery
    console.log("Content: " + $('p').text());

    //What I tried with JavaScript
    var text = document.getElementsByClassName('test').item(0);
    console.log(text.innerText);

    //This returns the HTMLCollection object, text[0] is undefined
    var text = document.getElementsByClassName('test');
    console.log(text);
  </script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...