在 <p> 元素上显示 JS 函数的返回值

Question

你好！希望你一切顺利！

我一直在为 ARPG 的挖掘系统开发某种工具。我已经设法制作了一个具有概率的随机数生成器-我正在使用 Javascript-。

我的想法是执行以下操作：

在这个项目中，“采矿”可以从 0 级升到 10 级。随着玩家等级的提升，每个等级找到矿物的概率增加 +4%（等级 1：+4%，等级 2：+8 %，3级：+12% ...）。我已经为每种矿物质（总共 5 个）给出了数字。这些矿石中的每一种都有以下出现在 0 级的概率：

-Mining Lvl 0-

1. Copper: 80%

2. Iron: 60%

3. Titanium: 40%

4. Silver: 10%

5. Platinum: 5%

And everytime time a player levels up +4% should be added to each ore.

我做了什么：

我想创建一个工具，它会给我一个随机数（从 1 到 5），这取决于每个人的概率和玩家级别。所以我所做的是创建一个页面，我将在其中输入级别，然后单击一个按钮，然后结果应该出现在 < p > 元素上。

这页纸

 <div class="genbox"> <!--this is just a container for the tool-->

    <h3><u>Enter Level & Click the button to get a random Number</u></h3>

    <label for="txtLvl">Current Level:</label>

    <input type="number" id="txtLvl" name="Enter current Lvl here">

    <button onclick=mLvl() class="sbutton">Click me!</button>

    <br><hr>

    <p id="mresult">Result Here</p>

    <hr>

</div>

这是我的功能：

function mLvl() {

    //to get the value entered

    //need to check if value=0,1,2,3...10 --

    //var inputText = document.getElementById(txtLvl).value;

    //For lvl 0:

    function mRandom() {

    var n=Math.floor(Math.random()*100)

    switch(n){

        case n<80:

            return 1;

        case n<60:

            return 2;

        case n<40:

            return 3;

        case n<10:

            return 4;

        case n<5:

            return 5;                   

        }

    }

document.getElementById("mresult").innerHTML= mRandom();

}

在这里，我想测试这是否有效，只需单击按钮即可在 < p > 元素上获取结果。问题是，每当我这样做时，我都会打印出“未定义”。

我想知道如何修复它，以便在单击按钮时显示该值。

**非常感谢您的阅读，祝您有美好的一天。**

Answer 1

您缺少“”并且还执行了在函数之外显示输出的代码，因此它将在脚本加载时设置，而不是在您单击时设置...执行以下操作以使其正确...function mRandom() {&nbsp; &nbsp; let n=Math.floor(Math.random()*100)&nbsp; &nbsp; let result=0&nbsp; &nbsp; if(n<80)result= 1;&nbsp; &nbsp; else if(n<60)result= 2;&nbsp; &nbsp; else if(n<40)result= 3;&nbsp; &nbsp; else if(n<10)result= 4;&nbsp; &nbsp; else if(n<5)result= 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; document.getElementById("mresult").innerHTML=result;}

Answer 2

mRandom()点击发生时您正在执行。相反，您需要在document.getElementById(mresult).innerHTML= mRandom();其中执行语句。所以把它放到一个函数中调用：<div class="genbox"> <!--this is just a container for the tool-->&nbsp; &nbsp; <h3><u>Enter Level & Click the button to get a random Number</u></h3>&nbsp; &nbsp; <label for="txtLvl">Current Level:</label>&nbsp; &nbsp; <input type="number" id="txtLvl" name="Enter current Lvl here">&nbsp; &nbsp; <button onclick="newLevel()" class="sbutton">Click me!</button>&nbsp; &nbsp; <!--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;^^^^^^^^^^^^^ -->&nbsp; &nbsp; <br><hr>&nbsp; &nbsp; <p id="mresult">Result Here</p>&nbsp; &nbsp; <hr></div>function newLevel() {&nbsp; &nbsp; var inputText = document.getElementById("txtLvl").value;&nbsp; &nbsp; …&nbsp; &nbsp; document.getElementById("mresult").innerHTML = mRandom();}