javascript - console.log - 写在位置栏中而不是控制台面板中

Question

我有一个标准表单，从一个文本框 <input type="text" ... 获取值操作它并将信息放入 div 或另一个文本框中(视情况而定)。

一切都是这样，直到我犯了一个错误。我添加了<form>在我的文本框周围，没有添加 return false调用函数时。我花了几秒钟才找出问题所在，但我注意到一些有趣的事情:console.log 信息被放置在位置栏中。

function getTotal(){
....
var total=end-start;
....
console.log(total);
}

正如预期的那样(因为没有包含 return false)，div 没有被写入，文本框也没有被写入，但是......看看屏幕截图。

这是怎么发生的？为什么要写入地址栏？

下面的屏幕截图:(我无法为其创建 jsfiddle，因为它需要表单提交按钮。)我在<input type="text" id="start">中输入了22文本框和 <input type="text" id="end"> 中的 77

一切都适用于:

<form>
<input type="text" name="start" id="start"><br/>
<input type="text" name="end" id="end"><br/>
<button onClick="checkTotal(); return false; ">Check Total</button><br/>
<input type="text" id="aaa"><br/>
</form>

删除 return false 并将其写入位置栏:

<form>
<input type="text" name="start" id="start"><br/>
<input type="text" name="end" id="end"><br/>
<button onClick="checkTotal();">Check Total</button><br/>
<input type="text" id="aaa"><br/>
</form>

javascript 是这样的(为了更容易阅读，所有这些都已被精简)

    function checkTotal(){

    var start=document.getElementById('start').value;
    var end=document.getElementById('end').value;
    var total=end-start;
    var writeTotal=document.getElementById('total');
    writeTotal.innerHTML=total;
    var abc=document.getElementById('aaa').value=total;
    console.log(total);

    }

Answer 1

您拥有的是一个具有隐式 GET 方法类型的表单。它的目的是根据字段名称将表单值作为 URL 编码参数添加到 URL。

因此，您看到的结果与 console.log 完全无关。