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.

Answer 1

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.

Answer 2

'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?>">