我试图将myRandom(随机数)打印为我创建的圆圈中间的字符串。除了当我使用此代码时,一切都正常工作,“ [object HTMLDivElement”显示在中间,而不是它正在创建的数字。这是我的代码:
<html>
<head></head>
<style>
#background{
position: absolute;
top: 0px;
left: 0px;
z-index:0;
width: 100%;
height: 100%;
background-size:cover;
}
#circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 100px;
height: 100px;
background-color: black;
}
#number {
color:white;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div id="background"> </div>
<div id="circle">
<div id="number"> 11 </div>
</div>
</body>
<script>
var myRandom = Math.ceil(Math.random() * 100) + 1; // max 100
var myRandom2 = Math.ceil(Math.random() * 359) + 0; // max 359
console.log(myRandom2);
var circleNumber = myRandom + 50;
console.log(circleNumber);
var myNumber =
document.querySelector("#number")
myNumber.style.fontSize = myRandom + "px";
myNumber.style.lineHeight = circleNumber + "px";
var myCircle =
document.querySelector("#circle");
myCircle.style.width = circleNumber + "px";
myCircle.style.height = circleNumber + "px";
var myColors =
document.querySelector("#background")
myColors.style.backgroundColor = "hsla("+myRandom2+", 100%, 48%, 1)"
var myColors2 =
document.querySelector("#circle")
myColors2.style.backgroundColor = "hsla("+myRandom2+", 60%, 21%, 1)";
var myText =
document.getElementById("number").innerHTML = myNumber;
</script>
我添加了整个代码,但问题出在最底层。我认为查看几乎所有内容以查看是否需要更改上述内容也将有所帮助。但是就像我之前说过的那样,除了最后一行代码之外,其他所有东西都无法正常工作,我已经上网冲浪尝试查找它们,它们只是告诉我使用String()函数。
最佳答案
在最后一行,您使用了错误的变量,请使用myRandom
而不是myNumber
。 myNumber
是样式和字体,其中myRandom
是随机数。您实际上可以在代码中使用3个变量:myRandom
,myRandom2
和circleNumber
。
var myText =
document.getElementById("number").innerHTML = myRandom;