Javascript 值由onClick事件生成，但不会插入到内部HTML中。为什么？

当我在

onClick

事件上从javascript函数返回值时，它被插入，但表单再次刷新，我丢失了选择和插入的值。 为什么会发生这种情况？我如何避免

下面是我的代码示例：

<form id="lengthConvert">
    <p><b>Enter a value : </b></p><input type="number" name="inputValue" />
    <p><b>Convert from : </b></p>
        <select name="fromUnit">
            <option value="Centimeter">Centimeter</option>
            <option value="Meter">Meter</option>
            <option value="Kilometer">Kilometer</option>
            <option value="Miles">Miles</option>
        </select>
    <p><b>Convert to : </b></p>
        <select name="toUnit">
            <option value="Centimeter">Centimeter</option>
            <option value="Meter">Meter</option>
            <option value="Kilometer">Kilometer</option>
            <option value="Miles">Miles</option>
        </select>
        <br/><p id="Output"></p>
    <button type="submit" form="lengthConvert" value="Submit" onclick="getElementById('Output').innerHTML=convert()">Convert</button>
</button>
</div>

</body>
</html>
<script>
    function convert(){
        var value = document.getElementsByName('inputValue')[0].value;
        var fromUnit= document.getElementsByName('fromUnit')[0].value;
        var toUnit= document.getElementsByName('toUnit')[0].value;
        if(fromUnit==toUnit){
            return value;
        }
    }
</script>

输入一个值：

转换自：

厘米
米
公里
英里
转换为：

厘米
米
公里
英里


转换
函数转换（）{
var value=document.getElementsByName（'inputValue'）[0].value；
var fromUnit=document.getElementsByName（'fromUnit'）[0]。值；
var toUnit=document.getElementsByName（'toUnit'）[0]。值；
if（fromUnit==toUnit）{
返回值；
}
}

当我从onclick事件上的javascript方法返回值时，它会被插入，但表单会再次刷新，我会丢失所有已插入的选择和值。

---

为什么？我怎样才能避免呢

当您单击按钮时，您正在提交表单，因为您没有停止默认行为。改变

<button type="submit"...

---

您需要做两件事：

从
onclick（）函数传递
事件
对象

使用
preventDefault（）防止在
convert
函数中提交表单


函数转换（e）{
e、 预防默认值（）；
var value=document.getElementsByName（'inputValue'）[0].value；
var fromUnit=document.getElementsByName（'fromUnit'）[0]。值；
var toUnit=document.getElementsByName（'toUnit'）[0]。值；
if（fromUnit==toUnit）{
返回值；
}
}

输入一个值：

转换自：

厘米
米
公里
英里
转换为：

厘米
米
公里
英里


转换
您正在提交表单，这会导致页面重新加载，从而删除提交之前更新的内容。相反，您需要使用常规按钮（
）

但是，除此之外，您的代码是非常过时和低效的
.getElementsByName（）
通常不推荐用于性能方面，但在您的情况下，更糟糕的是，您只需要一个元素，因此您要扫描整个DOM，获取一组匹配的元素，然后丢弃除一个之外的所有元素。对于大多数DOM搜索，请使用现代的和

您的HTML也无效，因为您有一个额外的关闭
按钮
标记一个禁止关闭
表单
标记

此外，不应使用内联事件属性（
onclick
）。这是一项已有25年以上历史的技术，它不会消亡，因为它很简单，人们只需复制/粘贴他们发现的其他似乎有效的代码。有不允许这样做

代码中还有许多其他问题。这是您的解决方案，经过清理和更新（确保看到HTML、CSS和JS注释）：


/*我们可以根据需要设置行的样式：*/
div.row{页边距顶部：1em；页边距底部：1em；字体重量：粗体；}

输入一个值：
转换自：
厘米
米
公里
英里
转换为：
厘米
米
公里
英里
转换
//获取所需的所有元素引用
设btn=document.querySelector（“按钮[type='button'”）；
让output=document.getElementById（'output'）；
//您只有一个名为“inputValue”的元素。请使用
//.querySelector（）使用有效的CSS选择器作为参数
//查找与选择器匹配的第一项。
//另外，不要将变量分配给元素的属性，因为
//如果您想要获得第二个属性值，您必须
//再次扫描文档以查找元素。只需存储一个
//引用元素本身，则可以经常访问该元素
//随你的便。
让input=document.querySelector（“input[name='inputValue']”）；
让fromUnit=document.querySelector（“选择[name='fromUnit']”）；
让toUnit=document.querySelector（“选择[name='toUnit']”）；
//用JavaScript而不是HTML设置事件处理
btn.addEventListener（“单击”，转换）；
函数转换（）{
console.log（fromUnit.value，toUnit.value）；
if（fromUnit.value==toUnit.value）{
//获取/设置文本时使用.textContent
//不包含任何HTML。它的速度更快，而且
//更安全。
output.textContent=input.value；
}
}
此表单不用于在任何地方提交数据，因此使用需要防止其默认行为的提交按钮没有任何意义。应使用常规按钮。
<button type="button"...