Question

好吧，让我更具体些；我正在将一个简单的摄氏温度转换为华氏度，并将华氏温度转换为摄氏温度会帮助我学习JavaScript。

因此，我已经成功使转换器工作，并使用新的'p'元素将其显示在DOM中（稍后将在CSS中添加边框）。

但是我正在苦苦挣扎的是让新的转换号码覆盖旧的号码。

现在，您输入一个数字，它将为您提供转换（在'p'元素内），然后当您转换下一个数字时，它将为您提供另一个。直到获得转化列表为止。

我将如何编写代码，以便在您按“ Enter”键时将旧结果替换为新结果？

这是到目前为止的代码（我知道这可能很基础，但是我对JavaScript还是很陌生）：

            var celToFaren = {
        celcius: function(convert) {
            var c = Number(document.getElementById("celCount").value);
            var e = c * 9/5 + 32;
            if (c === 0) {
                alert('Please Enter a Number');
                return false;
            } else {
            var element = document.getElementById('div1');
            var resultShow = document.createElement('p');
            resultShow.textContent = c + ' ' + 'Celcius ' + 'is equal to ' + e + ' Farenhite';

            element.appendChild(resultShow);

            }
        }
    };

Answer 1

在您的代码中，您每次都在创建一个新元素并每次都进行追加。

var resultShow = document.createElement('p');

您需要做的是创建一个带有标识符的空白'p'元素，然后重新使用它。例如。 <p id="result">

然后在每个enter上而不是创建新元素，只需使用javascript选择器方法替换新值即可。例如。 document.querySelector("#result").innerHTML = "new calculated value";

希望这会有所帮助。

Answer 2

在HTML代码中创建一个p元素，就像div1元素一样。然后更改

var resultShow = document.createElement('p');

进入

var resultShow = document.getElementById("result");

所以：

var celToFaren = {
    celcius: function(convert) {
        var c = Number(document.getElementById("celCount").value);
        var e = c * 9/5 + 32;
        if (c === 0) {
            alert('Please Enter a Number');
            return false;
        } else {
        var element = document.getElementById('div1');
        var resultShow = document.getElementById("result");
        resultShow.textContent = c + ' ' + 'Celcius ' + 'is equal to ' + e + ' Farenhite';

        element.appendChild(resultShow);

        }
    }
};

Answer 3

您可以添加一个事件侦听器，该侦听器将一直运行到用户按下Enter键且输入字段中有一个值为止。因此，根据您的代码，将C作为输入字段：

div

，您可以从此链接中了解有关定义每个按键编号的键控代码的更多信息： https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 4

一种方法可能是使用element.innerHTML ="";删除var celToFaren = { celcius: function(convert,val) { var c = val var e = c * 9/5 + 32; if (c === 0) { alert('Please Enter a Number'); return false; } else { var element = document.getElementById('div1'); var resultShow = document.createElement('p'); resultShow.textContent = c + ' ' + 'Celcius ' + 'is equal to ' + e + ' Farenhite'; element.innerHTML =""; element.appendChild(resultShow); } } }; celToFaren.celcius(null,20); celToFaren.celcius(null,50); celToFaren.celcius(null,100);内容，如下所示：

<div id="div1">
</div>

msDS-UserPasswordExpiryTimeComputed

用JavaScript替换旧代码

4 个答案: