it-swarm.com.ru

Как мне использовать эту переменную JavaScript в HTML?

Я пытаюсь сделать простую страницу, которая спрашивает вас о вашем имени, а затем использует name.length (JavaScript), чтобы выяснить, как долго ваше имя.

Это мой код до сих пор:

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>

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

4
Joseph

Вы не «используете» переменные JavaScript в HTML. HTML - это не язык программирования, это язык разметки, он просто «описывает», как должна выглядеть страница.

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

Во-первых, вам нужно куда-нибудь написать:

<body>
    <p id="output"></p>
</body>

Затем вам нужно обновить код JavaScript, чтобы записать в этот тег <p>. Убедитесь, что вы делаете это после страница готова.

<script>
window.onload = function(){
    var name = Prompt("What's your name?");
    var lengthOfName = name.length

    document.getElementById('output').innerHTML = lengthOfName;
};
</script>

window.onload = function() {
  var name = Prompt("What's your name?");
  var lengthOfName = name.length

  document.getElementById('output').innerHTML = lengthOfName;
};
<p id="output"></p>

14
Rocket Hazmat

Вы можете создать элемент <p>:

<!DOCTYPE html>
<html>
  <script>
  var name = Prompt("What's your name?");
  var lengthOfName = name.length
  p = document.createElement("p");
  p.innerHTML = "Your name is "+lengthOfName+" characters long.";
  document.body.appendChild(p);
  </script>
  <body>
  </body>
  </html>

5
user1823

Вы можете создать элемент с идентификатором, а затем назначить это значение длины этому элементу.

var name = Prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;
<p id='message'></p>

3
imran qasim

Попробуй это:

<body>
    <div id="divMsg"></div>
</body>
<script>
    var name = Prompt("What's your name?");
    var lengthOfName = name.length;
    document.getElementById("divMsg").innerHTML = "Length: " + lengthOfName;
</script>
1
Márcio Gonzalez

Вы не можете использовать переменные js внутри HTML. Чтобы добавить содержимое переменной javascript в html, используйте innerHTML () или создайте любой html-тег, добавьте содержимое этой переменной в этот созданный тег и добавьте этот тег в тело или любые другие существующие теги в html.

0
Kalyan Kumar S

HTML-теги, которые вы хотите редактировать, называются DOM (манипулирование объектом документа), вы можете редактировать DOM с помощью множества функций в глобальном объекте документа.

Лучший пример, который будет работать практически в любом браузере - это document.getElementById, это поиск html-тега с этим идентификатором, установленным в качестве атрибута.

Есть еще одна опция, которая проще, но работает только в современных браузерах (IE8 +), функция querySelector, она найдет первый элемент с подобранным селектором (селекторы CSS).

Примеры для обоих вариантов:

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
  <p id="a"></p>
  <p id="b"></p>
  <script>
    document.getElementById('a').innerHTML = name;
document.querySelector('#b').innerHTML = name.length;</script>
</body>

0
InvisibleUn1corn