Question

我试图将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（）函数。

Answer 1

在最后一行，您使用了错误的变量，请使用myRandom而不是myNumber。 myNumber是样式和字体，其中myRandom是随机数。您实际上可以在代码中使用3个变量：myRandom，myRandom2和circleNumber。

var myText =
document.getElementById("number").innerHTML = myRandom;

Answer 2

变量myNumber不是数字，实际上是类，你可以尝试投射

var myText =
document.getElementById("number").innerHTML = (int) myNumber;

或者获取myNumber的内部html

var myText =
document.getElementById("number").innerHTML = myNumber.innerHTML;

如何在JavaScript中将变量用作字符串？

2 个答案: