javascript - html中的span元素中粗体标签不生效

Question

我对 html、css 和 javascript 完全陌生。

我正在尝试创建一个简单的利率计算器，并且我想设置结果的样式，以便结果消息中的数字突出显示，如下所示:

Interest : If you deposit 10,
at an interest rate of 10.25.
You will receive an amount of 11.025,
in the year 2023.

我得到的是<b>呈现为文本的元素，例如:

Interest : If you deposit <b>10</b>,
at an interest rate of <b>10.25</b>.
You will receive an amount of <b>11.025</b>,
in the year <b>2023</b>.

我的代码是这样的:

function compute()
{
    var principal = document.getElementById("principal").value;
    var rate      = document.getElementById("rate").value;
    var years     = document.getElementById("years").value;
    var interest  = principal * (rate / 100) * years;
    // add amount to principal
    let amount    = interest + parseInt(principal);
    var year      = new Date().getFullYear() + parseInt(years);

    var interestString = "If you deposit " + principal.bold() + ",\n at an interest rate of " + rate + ".\n You will receive an amount of " + amount + ",\n in the year " + year + ".";
    document.getElementById("result").innerText = interestString
}

body {
    background-color:black;
    font-family: arial;
    color:white
}

h1 {
    color: grey;
    font-family: verdana
}

.maindiv {
    background-color: white;
    color:black;
    width:300px;
    padding: 20px;
    border-radius: 25px;
    margin: auto;
}

<div class="maindiv">
    <h1>Simple Interest Calculator</h1>
    Amount <input type="number"  id="principal">  
    <br/>
    Rate <input type="range" id="rate" min="1" max="20" step="0.25" value="10.25"  oninput="this.nextElementSibling.value = this.value">
    <output>10.25</output>   
    <br/>
    No. of Years 
    <select id="years">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <button onclick="compute()">Compute Interest</button>
    <br>
    <br>
    Interest : <span id="result"></span>
</div>

我很高兴能找到解决这个问题的方法。谢谢!

Answer 1

将 innerText 更改为 innerHTML。