Why can't I set the "value" property of my HTML element?

Question

When I attempt to run the following code, I keep getting the error:

Cannot set property "value" of null at "id"

I've tried to change the property from value to innerHTML but that didn't work. I would be grateful if you would be able to help me. Thank you!

<div class="input-field s6 col" style="color: white; background-color:transparent;">
  <input id="avatar_url" id="ipoza" type="text" onfocus="style='background-color:white;'" onblur="style='background-color:transparent'" value="http://i01.c.aliimg.com/img/ibank/2014/101/288/1614882101_2028072840.jpg"> <label for="avatar_url"><p>Poza de Profil</p></label>
</div>

<button onclick="i()"></button>
<script type="text/javascript">
  function i() {
    document.getElementById("ipoza").value = "Link";
  }
</script>

Multiple ids aren't allowed, but you can use class="avatar_url" instead. Classes can be added to multiple elements, so that'll be more useful. — Lorddirt, Jul 14 '18 at 23:47
Try running your HTML through an HTML validator such as that at https://validator.w3.org/, which will provide the helpful `Line 2, Column 29: duplicate specification of attribute "ID" — , Jul 15 '18 at 02:27
On a separate note, code like `onfocus="style='background-color:white;'" onblur="style='background-color:transparent'"` is hard to read and debug. Instead, just write a simple CSS rule `#iposa:focus { background-color: white; }`. — , Jul 15 '18 at 04:24

score 0 · Accepted Answer · answered Jul 14 '18 at 23:54

You can only have one id per element. Your input has 2 ids, which is not allowed. Just give it the single id of ipoza so you can select it with document.getElementById("ipoza").

<div class="input-field s6 col" style="color: white; background-color:transparent;">
  <input id="ipoza" type="text" onfocus="style='background-color:white;'" onblur="style='background-color:transparent'" value="http://i01.c.aliimg.com/img/ibank/2014/101/288/1614882101_2028072840.jpg"> <label for="ipoza"><p>Poza de Profil</p></label>
</div>

<button onclick="i()"></button>
<script type="text/javascript">
  function i() {
    document.getElementById("ipoza").value = "Link";
  }
</script>

Why can't I set the "value" property of my HTML element?

1 Answers1