提示框不起作用

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>

Run Code Online (Sandbox Code Playgroud)

Chrome中的控制台显示错误:

未捕获的TypeError:type不是函数

Answer 1

Rhu*_*orl 7

有趣的是,它似乎被type视为保留关键字或其他东西,虽然我确信它不是.简单地将方法重命名为其他方法,例如typein(),解决问题:

    <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>

Run Code Online (Sandbox Code Playgroud)

一些解释

进一步调查,原因似乎是onclick函数本身在button元素的上下文中运行,因为在此上下文中type此元素的属性type是字符串"submit".您也可以为其他属性执行此操作,例如textContent以获取按钮文本:

<button onclick="console.log(type, textContent)">Some Text</button>

Run Code Online (Sandbox Code Playgroud)

这有点道理,但我不明白它是如何发生的 - 如果按钮被绑定到onclick函数(例如使用bind()),你需要调用this.type以获取该属性值.也许一个JS大师可以解释一下？

归档时间：	10 年，4 月前
查看次数：	211 次
最近记录：	10 年，4 月前