时间戳

首页 > 解决方案 > 如何在输入类型文本上使用 innerHTML 编写？

html - 如何在输入类型文本上使用 innerHTML 编写？

问题描述

我希望计算区域的答案出现在文本框中我尝试了不同的方法但它不起作用

{{ document.getElementById("area(A)").innerHTML = <input type="number" id="area(A)" + calculatearea +"> }} 谁能告诉我我在这里做错了什么？

    <p style=color:tan; font-size:30px; >Area and Perimeter Calculator</p>
    <br>

<form>
    Length:
    <br>
    <input type="number" id="length(L)" placeholder="Insert Length Here">
    <br/>
    <br>
    Width:
    <br>
    <input type="number" id="width(W)" placeholder="Insert Width Here">
    <br/>
    <br>
    <button type="button" onclick="calculateperimeter()">Calculate Perimeter</button> 
    <button type="button" onclick="calculatearea()">Calculate Area</button>
    <br> 
    <br>
    Perimeter: 
    <p id="perimeter(P)"></p>
    <br>
    <br> 
    Area:
    <p id="area(A)"></p>

</form>


<script type="text/javascript">
    
    function calculateperimeter(){   
    var length= document.getElementById("length(L)").value;
        var width= document.getElementById("width(W)").value;   
    var perimeter=(length) * (2) + (width) * (2);
    document.getElementById("perimeter(P)").innerHTML = perimeter;  
    }
    
</script>


    <script type="text/javascript">
     
        function calculatearea(){   
        var length= document.getElementById("length(L)").value;
        var width= document.getElementById("width(W)").value;   
        var area=(length) * (width);    
        document.getElementById("area(A)").innerHTML = <input type="number" id="area(A)" + calculatearea +"> ;
        }
    
    </script>

</body>

标签： html

解决方案

我相信 innerHTML 内容应该在一个字符串中。尝试这个：

document.getElementById("area(A)").innerHTML = `<input type="number" id="area(A)" value="${calculatearea}">`;

请注意，我使用了反引号，因为它们允许我们通过使用替换字符串中的变量${variable name here}

推荐阅读