Как использовать JavaScript Math.random() в теге HTML p

ProgramBox

Как использовать JavaScript Math.random() в теге HTML p

Post author:admin
Запись опубликована:4 января, 2022
Post category:Вопросы по программированию

#javascript #html #css

Вопрос:

Я пытаюсь напечатать 1 случайное число в своем lt;pgt; HTML.

язык JavaScript:

 function number()  {  var minNumber = 1; // The minimum number you want   var maxNumber = 5; // The maximum number you want  var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number   document.getElementById("randomNum").innerHTML = randomNumber; // Sets content of lt;divgt; to number   return false; // Returns false just to tidy everything up }  window.onload = number; // Runs the function on click

HTML:

 lt;div class = cardgt;  lt;div id="randomNum"gt;  lt;h2gt;Headerlt;/h2gt;  lt;pgt;stats - [randomNumber] lt;br/gt; stat 2 - [randomNumber] lt;/pgt;  lt;/divgt; lt;/divgt;

(Я не мог заставить свой HTML публиковать нормально, поэтому мне пришлось сделать его уродливым. Прости…)

Мое случайное число будет выведено в сторону, и оно не сможет напечатать больше в пределах одного и того же p. Мне было интересно, есть ли способ разместить мое случайное число из JavaScript в моем p в HTML и сохранить все настройки css в другой карточке класса div.

Спасибо!

1. Я попытался исправить форматирование вашего кода, но я действительно не уверен, что вы намеревались поместить в пример HTML

2. Форматирование вашего вопроса было исправлено. Как вы думаете, вы могли бы перепроверить HTML-часть? К твоему сведению, звучит так, как будто ты хочешь document.querySelector("#randomNum p").textContent = randomNumber

Ответ №1:

Если я правильно понял ваш вопрос, вы хотите поместить случайное число в p вместо div , и каждый раз добавлять его.

Вы должны каждый раз создавать элемент document.createElement и добавлять его в div, вот так

 function number()  {  var minNumber = 1; // The minimum number you want   var maxNumber = 5; // The maximum number you want  var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number   var newNumber = document.createElement("p");  newNumber.innerText = randomNumber;   document.getElementById("randomNum").appendChild(newNumber);   return false; // Returns false just to tidy everything up }

1. Каким будет форматирование при добавлении этого в мой тег p? Будет ли var newNumber позволять этому работать в любом теге p?

2. Это добавит новый тег P в ваш div каждый раз, когда вы его запускаете, содержащий номер.

3. таким образом, каждый раз, когда мой тег p используется в моем HTML-файле, случайное число будет автоматически отображаться с помощью этой функции javascript?

4. Нет. Каждый раз, когда вы запускаете функцию, она создает новый тег P с номером и добавляет его в div.

Ответ №2:

 function number()  {  var minNumber = 1; // The minimum number you want   var maxNumber = 5; // The maximum number you want  var randomNumber = Math.floor(Math.random() * (maxNumber   1)   minNumber); // Generates random number   //document.getElementById("randomNum").innerHTML = randomNumber; // Sets content of lt;divgt; to number  var x = document.getElementsByClassName("randNum");  x[0].innerHTML = randomNumber;  x[1].innerHTML = randomNumber;   return false; // Returns false just to tidy everything up }  window.onload = number; // Runs the function on click

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;titlegt;lt;/titlegt; lt;/headgt; lt;bodygt;  lt;div class = cardgt;  lt;div id="randomNum"gt;  lt;h2gt;Headerlt;/h2gt;  lt;pgt;stats - lt;span class="randNum"gt;lt;/spangt; lt;br/gt; stat 2 - lt;span class="randNum"gt;lt;/spangt; lt;/pgt;  lt;/divgt; lt;/divgt;  lt;/bodygt; lt;/htmlgt;

1. Это работает, но случайное число печатается только один раз, и оно не находится в той же строке, что и статистика, оно печатается в середине круга, который у меня есть из моего css-файла. Это то, что я должен был бы исправить в своем файле CSS? или это будет проблема с javascript?

2. У вас есть тег разрыва внутри элемента p, который вы должны удалить, чтобы сохранить случайное число в одной строке.

3. lt;pgt;статистика — lt;span class=»randNum»gt;lt;/spangt; 2 стат — lt;span class=»randNum»gt;lt;/spangt; статистика — lt;span class=»randNum»gt;lt;/spangt;lt;/pgt;

4. Также, если вы используете цикл for, и вы можете отображать любые числа случайных чисел, используя имя класса для элемента span в элементе p, например

5. для(i = 0; i

Ответ №3:

Вы должны дать элементу P идентификатор, а затем сделать document.getElementbyID(whatever you put the ID for in the P tag) = randomNumber так, чтобы ваш Html был

 lt;p id="whatever you want"gt;lt;/pgt;

Надеюсь, это поможет.