获取纯文本形式的javascript计算结果

Get javascript calculation result as plain text?

本文关键字：javascript 计算 结果 文本 获取      更新时间：2023-09-26

我创建了一个javascript计算，并希望将结果作为纯文本交付，包括result.value.

然而，我只是设法在<input>形式中做到这一点。

这是我的代码:

Javascript: 

function doSum() {
   var schritthoehe = document.getElementById("schritthoehe").value;
   var sum = schritthoehe * 0.66;
   document.getElementById("ergebnis").value = sum;
   }
Html: 

<body>
<form name="form1" method="post" action="">
<input type="text" id="schritthoehe">
<input type="button" value="Summieren" onClick="doSum();">
Ergebnis: <input type="text" id="ergebnis" disabled>
</form>
</body>

要以纯文本输出结果而不是使用输入元素，您可以使用span并设置其textContent。示例如下:

以前的解决方案使用innerHTML，但我做了一些研究，发现textContent更具语义性，并且提供了稍好的性能。

Working Live Demo: 

function doSum() {
    var schritthoehe = document.getElementById("schritthoehe").value;
    var sum = schritthoehe * 0.66;
    document.getElementById("ergebnis").textContent = sum;
}
<form name="form1" method="post" action="">
<input type="text" id="schritthoehe">
<input type="button" value="Summieren" onClick="doSum();">
    Ergebnis: <span id="ergebnis"></span>
</form>

您可以将ergebnis设置为output元素，例如空的<div id="ergebnis"></div>并设置它的.textContent属性，这可能是您可以获得的最接近的:

function doSum() {
   var schritthoehe = document.getElementById("schritthoehe").value;
   var sum = schritthoehe * 0.66;
   document.getElementById("ergebnis").textContent = sum;
}

我不知道这是不是你想要的。

但是你可以使用函数innerHTML:

. getelementbyid (div id)。

使用Jquery非常简单 

function doSum() {
        var schritthoehe = $("#schritthoehe").val();
        var sum = schritthoehe * 0.66;
        $("#ergebnis").html(sum);
        // if you want the value inside the input box then 
        $("#ergebnis_input").val(sum)
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
    <input type="text" id="schritthoehe">
    <input type="button" value="Summieren" onClick="doSum();">
        Ergebnis: <span id="ergebnis"></span><input type="text" id="ergebnis_input" readonly>
    </form>

相关文章：