单击图像不起作用答案

【问题标题】：On-clicking on image is not working单击图像不起作用
【发布时间】：2018-02-21 06:07:58
【问题描述】：

我试过这样做，有一个图像和一个输入字段。输入字段保持隐藏。当我单击图像时，输入字段将从隐藏变为文本。

我试过的代码如下：

function inp()
{
  var y=document.getElementByID("hiddenInput");
  y.type= "text";
}

HTML:
    
<img src="lc.png" height="120px" onclick="inp()" />

<div><input type="hidden" id="hiddenInput" placeholder="What are you looking 
    for?"></div>

事情不正常。该图像不可点击，当我们点击时没有任何反应。如果有人能告诉我问题出在哪里，我会很高兴？

还有一个关于堆栈溢出的问题，询问如何使图像可点击，我尝试了代码，但它出错了，所以我问错误在哪里。现在我得到了答案。这是一个愚蠢的错误，但我认为这没关系，因为我是新来的。感谢那些帮助过我的人。我的问题现在解决了:)

【问题讨论】：

change html input type by JS?的可能重复
从 getElementByID 更改为 getElementById。解决您的问题。

标签： javascript html onclick

【解决方案1】：

您必须将 getElementByID 更改为 getElementById 。不同之处在于“ID”部分

【讨论】：

【解决方案2】：

var y=document.getElementByID("hiddenInput");改成

var y=document.getElementById("hiddenInput");

演示：

function inp(){
  console.log("done");
  var y=document.getElementById("hiddenInput");
                y.type= "text";
}

<img src="https://www.w3schools.com/howto/img_paris.jpg" height="120px" onclick="inp()" />

<div><input type="hidden" id="hiddenInput" placeholder="What are you looking 
for?"></div>

【讨论】：

【解决方案3】：

只要确保您的 script 标签高于 img 标签

并将getElementByID 更改为getElementById

<script>
function inp()
            {
                var y=document.getElementById("hiddenInput");
                y.type= "text";
            }
</script>

<img src="lc.png" height="120px" onclick="inp()" />

<div><input type="hidden" id="hiddenInput" placeholder="What are you looking 
for?"></div>

小提琴：https://jsfiddle.net/xya0tq8t/2/

或者

如果您使用单独的 JS 文件，请确保 js 代码在 DOM 准备好后运行

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<body>

    <img src="lc.png" height="120px" onclick="inp()" />

    <div><input type="hidden" id="hiddenInput" placeholder="What are you looking 
    for?"></div>

<script>
  function inp() {
    document.getElementById("hiddenInput").setAttribute('type','text'); 
  }
</script>                
</body>
</html>

【讨论】：