On-clicking on image is not working

Question

I tried doing this, there's an image and an input field. The input field is kept hidden. When I click on the image, the input field will change from hidden to text.

The code I tried is below:

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>

Things are not working. The image is not on-clickable, and nothing happens when we click. I would be glad if anyone can tell me please where the problem is?

There are another questions on stack overflow asking how to make an image on-clickable, I tried the code, and it went wrong, so I asked where the mistake is.. Now I got the answer. It is a silly mistake, but I think it's okay since I am new here.. Thanks to those who helped me. My problem is solved now :)

Possible duplicate of [change html input type by JS?](https://stackoverflow.com/questions/9093992/change-html-input-type-by-js) — Kasnady, Feb 21 '18 at 06:11
change from getElementByID to getElementById. Solves your problem. — Kishor Velayutham, Feb 21 '18 at 06:16

score 2 · Answer 1 · answered Feb 21 '18 at 06:11

2

You have to change getElementByID to getElementById . The different is at the 'ID' part

answered Feb 21 '18 at 06:11

Tree Nguyen

1,198
1
14
37

score 1 · Answer 2 · answered Feb 21 '18 at 06:12

var y=document.getElementByID("hiddenInput"); change it to

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

DEMO:

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>

score 1 · Answer 3 · answered Feb 21 '18 at 06:14

Just make sure your script tag is above img tag

And change getElementByID to 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>

Fiddle: https://jsfiddle.net/xya0tq8t/2/

Or

If you are using separate JS file then make sure js code runs after DOM is ready

score 0 · Answer 4 · answered Feb 21 '18 at 07:33

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

On-clicking on image is not working

4 Answers4