Javascript 为什么此代码仅适用于按钮类型属性？

我有一个代码，我在表单的输入中输入值

这里的代码工作正常。将在输入中输入值

    <form>
        <label for="fname">First name:</label><br>
        <input id="fname" type="text" id="fname"><br>
        <button id="btn" type="button">Submit</button>
    </form> 


var inputs = document.getElementsByTagName("input");
var submitButton = document.getElementById("btn");

submitButton.addEventListener("click"  , function() {
    inputs[0].value = "fill in value in the input";
})

名字：



提交
var inputs=document.getElementsByTagName（“输入”）；
var submitButton=document.getElementById（“btn”）；
addEventListener（“单击”，函数（）{
输入[0]。value=“在输入中填入值”；
})

但我的问题是，如果我使用

<button id="btn">Submit</button> 
OR
 <input id="btn" type="submit" value="Submit">
instead of
<button id="btn" type="button">Submit</button>
like in the first example 

提交
或
而不是
提交
就像第一个例子一样

然后，输入将不会填充来自JS的所需值。

---

当我单击按钮一毫秒时，输入得到值，然后消失。

为ID为btn的元素添加

单击
事件监听器
没有ID
btn
，并且eventListener未应用于它<代码>
应该可以工作

对于
Submit
，它默认为
type=“Submit”
，因此当您单击该页面时，会重新加载该页面。您可以使用
中的
e.preventDefault（）
单击
处理程序停止该操作。
它提交表单，然后重新加载页面。@Barmar感谢您的时间。但是通过输入，我有type=“submit”，然后它提交表单，但通过按钮我没有提交东西，为什么要再次提交？它默认为
type=“submit”
@Christina。这是打字错误。我用id=“btn”编辑了它。但是它也不能工作。。。。