在 <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() {

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

    let result=0

    if(n<80)result= 1;

    else if(n<60)result= 2;

    else if(n<40)result= 3;

    else if(n<10)result= 4;

    else if(n<5)result= 5;                   

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

}

Answer 2

mRandom()点击发生时您正在执行。相反，您需要在document.getElementById(mresult).innerHTML= mRandom();其中执行语句。所以把它放到一个函数中调用：

<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="newLevel()" class="sbutton">Click me!</button>

    <!--             ^^^^^^^^^^^^^ -->

    <br><hr>

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

    <hr>

</div>

function newLevel() {

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

    …

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

}