Я пытался создать страницу, которая рандомизирует 3 числа от 1 до 20. Я столкнулся с проблемой, когда пытался использовать document.getElementById. Я пытался подставить значение id="large", но по неизвестной причине всегда получал [object HTMLParagraphElement].
Вот исходный код:
<html>
<body onload = "myFunction()">
<div class = "intro"></div>
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class = "points">
<div class = "first">
<p>Antonio</p>
<p id = "num1"></p>
</div>
<div class = "second">
<p>Jonathan</p>
<p id = "num2"></p>
</div>
<div class = "third">
<p>Willy</p>
<p id = "num3"></p>
</div>
</div>
<div class = "info">
<p>The one who got the most points is: </p>
<p id = "large"></p>
</div>
<script>
function myFunction() {
let x = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num1").innerHTML = x;
let y = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num2").innerHTML = y;
let z = Math.floor((Math.random() * 20) + 1 );
document.getElementById("num3").innerHTML = z;
let largest;
if (num1 >= num2 && num1 >= num3){
largest = num1;
document.getElementById("large").innerHTML = largest;
}
else if (num2 >= num1 && num2 >= num3){
largest = num2;
document.getElementById("large").innerHTML = largest;
}
else{
largest = num3;
document.getElementById("large").innerHTML = largest;
}
}
</script>
</body>
Да я тоже только сейчас понял. Виноват
Неважно, я получил ответ. Я просто заменил num1 на x, num2 на y и num3 на z в операторах if-else.
num1
, num2
и num3
не определены в вашем Javascript. Они будут автоматически ссылаться на определенные id
в HTML как глобальные переменные и использоваться как элементы p
для вашего случая. Следовательно, исправление может изменить x
, y
и z
эти переменные num
, чтобы переопределить их.
<html>
<body onload = "myFunction()">
<div class = "intro">
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class = "points">
<div class = "first">
<p>Antonio</p>
<p id = "num1"></p>
</div>
<div class = "second">
<p>Jonathan</p>
<p id = "num2"></p>
</div>
<div class = "third">
<p>Willy</p>
<p id = "num3"></p>
</div>
</div>
<div class = "info">
<p>The one who got the most points is: </p>
<p id = "large"></p>
</div>
<script>
function myFunction() {
const num1 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num1").innerHTML = num1;
const num2 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num2").innerHTML = num2;
const num3 = Math.floor((Math.random() * 20) + 1);
document.getElementById("num3").innerHTML = num3;
let largest;
if (num1 >= num2 && num1 >= num3) {
largest = num1;
} else if (num2 >= num1 && num2 >= num3) {
largest = num2
} else {
largest = num3;
}
document.getElementById("large").innerHTML = largest;
}
</script>
</body>
О, правильно, позвольте мне соответствующим образом изменить свой ответ
Будет ли что-то подобное работать?
<html>
<body onload = "myFunction()">
<div class = "intro"></div>
<h1>The Egg Hunt</h1>
<p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
<p>These are the points gathered by the three participants: </p>
</div>
<div class = "points">
<div class = "first">
<p>Antonio</p>
<p id = "num1"></p>
</div>
<div class = "second">
<p>Jonathan</p>
<p id = "num2"></p>
</div>
<div class = "third">
<p>Willy</p>
<p id = "num3"></p>
</div>
</div>
<div class = "info">
<p>The one who got the most points is: </p>
<p id = "large"></p>
</div>
<script>
function generateNumber() {
return Math.floor((Math.random() * 20) + 1 )
}
function myFunction() {
let x = generateNumber();
document.getElementById("num1").innerText = x;
let y = generateNumber();
document.getElementById("num2").innerText = y;
let z = generateNumber();
document.getElementById("num3").innerText = z;
const largest = Math.max(x, y, z)
document.getElementById("large").innerText = largest;
}
</script>
</body>
Это тоже работает!
Поскольку num1 — это абзац, а не переменная (как вы думаете), чего вы вообще ожидаете от num1? (И число2, число3...)