一些解释

Question

其他3个按钮正常运行，但是最后一个按钮可以让人们输入要更改的特定颜色。我已经尝试过并检查过，除非我真的很胖，看不出有什么问题...如果我没有看到如此明显的东西，请提前抱歉。

    <html>
    <head>
    <title>FA2</title>
    </head>
    <body>
    <h1 id=js>JavaScript</h1>
    <script>
    function show(){
       document.getElementById("js").innerHTML="is a Programming Language"}
    
    function reset(){
       document.body.style.backgroundColor="white";
       document.getElementById("js").innerHTML="JavaScript"}
    
    function red(){
       document.body.style.backgroundColor="red"}
    
    function green(){
       document.body.style.backgroundColor="green"}
    
    function blue(){
       document.body.style.backgroundColor="blue"}
      
    function type(){
       var color = prompt("Enter Color");
       document.body.style.backgroundColor = color}
    </script>
    
    <style type="text/css">
    
    body
    {
    text-align:center;
    font-family:Arial;
    }
    
    </style>
    
    <button onclick="show()">Show</button>
    <button onclick="reset()">Reset</button>
    <hr>
    
    Change Background:
    <button onclick="red()">Red</button>
    <button onclick="green()">Green</button>
    <button onclick="blue()">Blue</button>
    <button onclick="type()">Type Color</button>
    <hr>
    </body>
    </html>

Chrome中的控制台显示错误：

未捕获的TypeError：类型不是函数

Answer 1

有趣的是，它似乎将type视为保留关键字或其他内容，但我确信它不是。只需将方法重命名为其他内容，例如typein()，就可以解决问题：

＆＃13;

    <html>
    <head>
    <title>FA2</title>
    </head>
    <body>
    <h1 id=js>JavaScript</h1>
    <script>
    function show(){
       document.getElementById("js").innerHTML="is a Programming Language"}
    
    function reset(){
       document.body.style.backgroundColor="white";
       document.getElementById("js").innerHTML="JavaScript"}
    
    function red(){
       document.body.style.backgroundColor="red"}
    
    function green(){
       document.body.style.backgroundColor="green"}
    
    function blue(){
       document.body.style.backgroundColor="blue"}
      
    function typein(){
       var color = prompt("Enter Color");
       document.body.style.backgroundColor = color}
    </script>
    
    <style type="text/css">
    
    body
    {
    text-align:center;
    font-family:Arial;
    }
    
    </style>
    
    <button onclick="show()">Show</button>
    <button onclick="reset()">Reset</button>
    <hr>
    
    Change Background:
    <button onclick="red()">Red</button>
    <button onclick="green()">Green</button>
    <button onclick="blue()">Blue</button>
    <button onclick="typein()">Type Color</button>
    <hr>
    </body>
    </html>

＆＃13;

一些解释

进一步调查，原因似乎是onclick函数本身在button元素的上下文中运行，并且此元素{{1}上有type属性在这个上下文中是字符串＆＃34; submit＆＃34;。您也可以为其他属性执行此操作，例如textContent获取按钮文本：

＆＃13;

type

＆＃13;

这有点道理，但我不明白它是如何发生的 - 如果按钮被绑定到onclick功能（例如使用<button onclick="console.log(type, textContent)">Some Text</button>），则需要调用bind()获得该财产价值。也许一个JS大师可以解释一下？

Answer 2

虽然Rhumborl's answer解释了一下发生了什么以及如何解决这个问题，但我想说明规范的实际内容，以及为什么不能使用{{1}以这种方式在内联事件处理程序中。

规范lists how to get事件处理程序的当前值，经过了许多步骤。其中之一就是设置词汇环境范围：

如果element不为null，则让Scope为NewObjectEnvironment（element，Scope）的结果

在我们的例子中，element不是null，因此它被有效地用作函数的范围。这意味着任何未显式声明的变量的使用都将通过在回退到更高级别的范围（这是实际声明type函数的位置）之前查找元素上的属性来开始。

除此之外，<button> element在其IDL界面上指定了type()属性，定义为：

类型IDL属性必须反映同名的content属性，仅限于已知值。

所以执行时：

type

首先会在按钮上找到<button onclick="type()">属性，该属性必须与上面的属性匹配。 type属性默认为type，因此它有效地尝试运行"submit"。显然，这不是一个功能，这就是你看到的原因：

类型不是函数

理想情况下，您不会以这种方式使用内联事件处理程序，而是使用addEventListener（或类似jQuery等库）将事件处理程序绑定到其他位置的click事件，但是这样做了超越了在这里发生的事情的范围。

Answer 3

将函数名称从Type更改为any。试试下面的例子。

function getType(){
   var color = prompt("Enter Color");
   document.body.style.backgroundColor = color}
</script>

<style type="text/css">

body
{
text-align:center;
font-family:Arial;
}

</style>

<button onclick="show()">Show</button>
<button onclick="reset()">Reset</button>
<hr>

Change Background:
<button onclick="red()">Red</button>
<button onclick="green()">Green</button>
<button onclick="blue()">Blue</button>
<button onclick="getType()">Type Color</button>
<hr>
</body>
</html>

提示框不起作用

3 个答案:

一些解释