Div is Not Displaying Input or Hiding Itself When Clicked

Question

I am trying to make a div that hides itself when clicked and shows an input.

My CSS:

#btn {
    width:100%;
    height:100%;
    display:block;
    text-align:center;
}

#i1 {
    display:none;
}

My JavaScript:

<script>
document.getElementById('btn').onclick = function() {
 document.getElementById('i1').style.display = 'block';
  document.getElementById('btn').style.display = 'none';
}
</script>

My HTML:

<div id="btn">Company</div><input id="i1" type="text" value="<?php echo"{$row['company']}";}?>">

Can anyone tell me why the Div is not hiding and, or, why the input is not showing?

Thank you for any help. All help is appreciated.

You're probably running your script before the said elements exist. — Teemu, May 12 '14 at 19:38

score 2 · Accepted Answer · answered May 12 '14 at 19:39

2

The script works perfectly fine here.

You're running the script before the element is loaded. Try placing the <script> at the end of the page.

answered May 12 '14 at 19:39

John Bupit

10,406
8
39
75

Spot on. As an added bit of info, OP, if you wanted to run your script in the head, you could define your function as a non anonymous function and call it, [like so](http://jsfiddle.net/8QDMs/). – user3507600 May 12 '14 at 19:46
1

@user3507600, I would avoid mixing javascript in with the dom elements as much as possible. – Smern May 12 '14 at 19:49
@smerny, what do you mean by 'mixing javascript in with the dom elements' and why? – user3507600 May 12 '14 at 19:50
@smerny I agree. If the OP really needs the script in the head, they could place in the `onload` event. I think, [this answer](http://stackoverflow.com/a/9899701/1492578) explains the best way to do it in _pure_ JavaScript. – John Bupit May 12 '14 at 19:52
@smerny @JohnBupit, I think I see what you guys are talking about now. I suppose you could still use a named function without mixing, also if written properly, you could make this expandable (since it looks like Kelsey plans to have multiples of these given the input is named `i1`). – user3507600 May 12 '14 at 20:00
@user3507600 sure, but I also prefer to avoid using indexed ID's just to appease javascript. Adding listeners based on classes and using `this` helps with that. Also much easier/cleaner to do using jquery, this is how I would do it: [JSFiddle](http://jsfiddle.net/kXAPe/1/) – Smern May 12 '14 at 23:20

Daniel · Answer 2 · 2014-05-12T19:51:26.223

0

'Your quotes in your php are probably not helping and mess it up some.

Try:

<?php

$row['company'] = "some company";
$company = $row['company']

?>

<input id="i1" type="text" value="<?php echo $company?>">

edited May 12 '14 at 19:51

answered May 12 '14 at 19:43

Daniel

4,816
3
27
31

Div is Not Displaying Input or Hiding Itself When Clicked

2 Answers2