JavaScript函数命名问题解析：为何discount()函数调用不生效，重命名为discounts()即可正常运行

这个问题的核心原因是DOM元素的ID会自动成为全局window对象的属性，和你的函数名冲突了！

看你的代码里，有一个输入框的id正好是discount：

<input type="text" name="discount" id="discount">

在浏览器的全局环境中，所有带有id属性的DOM元素都会被自动挂载到window对象上——相当于浏览器偷偷帮你执行了这么一行代码：

window.discount = document.getElementById('discount');

而你自己定义的function discount()同样会被挂载到window对象上。这时候就出现了优先级冲突：浏览器自动生成的DOM元素属性会覆盖你手动定义的同名函数。当你点击按钮调用discount()时，实际调用的是那个输入框元素对象，而不是你写的函数逻辑，自然没法正常执行。

等你把函数改名为discounts()后，这个名字和DOM元素的id不再重复，window.discounts就指向了你定义的函数，点击按钮时自然能正常触发计算逻辑。

你可以自己验证一下：在浏览器控制台里输入console.log(discount)，当函数叫discount时，输出的会是那个输入框元素；改名后再打印，才会显示你写的函数本身。

内容的提问来源于stack exchange，提问作者BradLee