title: What is making my variable have a value of null when it selected from the DOM
body: <p>I am trying to manipulate my HTML elements. I am trying to use dom selectors to change the values of the elements on my page but I keep getting </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'innerHTML' of null
    Checking in the browser console to check what the issue is, I found out the logic I was using in dynamically selecting my elements was what was causing the trouble but when I use the same logic to pick up the element, it works well...
    Can I please get an explanation of why I am getting this behaviour...</p>
  </blockquote>
  
  <p>Below is a snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let timerObj = {
    minutes: 0,
    seconds: 0,
    timerId: 0
  }
  
  const soundAlarm = () =&gt; {
    let amount = 3;
    let audio = new Audio('Timer_Sound_Effect.mp3');
  
    const playSound = () =&gt; {
      audio.pause();
      audio.currentTime = 0;
      audio.play();
    }
  
    for (let i = 0; i &lt; amount; i++) {
      setTimeout(playSound, 1200 * i);
    }
  }
  
  const updateValue = ((key, value) =&gt; {
    if (value &lt; 0) value = 0;
    console.log('Positive Numbers');
  
    if (key === 'seconds') {
      if (value &lt; 10) value = '0' + value;
    }
  
    let keySelect = document.getElementById(key);
  
    keySelect.innerHTML = value || 0
    timerObj[key] = value;
    console.log(keySelect);
    console.log('mins', timerObj.minutes);
    console.log('secs', timerObj.seconds);
  })
  
  
  (function detectChanges(key) {
    console.log('detectChanges');
  
    let input = document.getElementById(`${key}-input`);
  
    input.addEventListener('change', () =&gt; {
      updateValue(key, input.value);
    })
  
    input.addEventListener('keyup', () =&gt; {
      updateValue(key, input.value);
    })
    return arguments.callee;
  })('minutes')('seconds');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body, input, button {
    font-family: 'Montserrat', sans-serif;
  }
  
  body {
    margin: 72px 140px 0;
  }
  
  #header {
    font-weight: 800;
    font-size: 74px;
  }
  
  #controls {
    display: inline-block;
    width: 46%;
    border-right: 1px solid rgba(0, 0, 0, .5);
    padding-right: 42px;
    padding-bottom: 42px;
  }
  
  .input-group {
    margin: 26px 0;
  }
  
  label {
    display: inline-block;
    width: 24%;
    font-weight: 200;
    font-size: 30px;
    padding: 12px;
  }
  
  input {
    width: 60%;
    font-size: 30px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    padding-left: 6px;
    font-weight: 200;
    outline: none;
  }
  
  input:disabled {
    background-color: white;
    opacity: .6;
  }
  
  button {
    color: white;
    border: none;
    outline: none;
    padding: 12px 62px;
    background-color: #222;
  }
  
  button:disabled {
    opacity: .2;
  }
  
  button:hover {
    opacity: .5;
  }
  
  h2 {
    display: inline-block;
    vertical-align: top;
    font-weight: 200;
    font-size: 144px;
    margin: 12px 0;
    padding-left: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;800&amp;display=swap" rel="stylesheet"&gt;
    &lt;title&gt;Clockworks&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 id="header"&gt;Clockworks&lt;/h1&gt;
  
    &lt;section id="controls"&gt;
      &lt;div class="input-group"&gt;
        &lt;label for="minutes-input"&gt;Minutes&lt;/label&gt;
        &lt;input type="number" id="minutes-input" placeholder="0" max="480" min="0"&gt;
      &lt;/div&gt;
  
      &lt;div class="input-group"&gt;
        &lt;label for="seconds-input"&gt;Seconds&lt;/label&gt;
        &lt;input type="number" id="seconds-input" placeholder="0" max="59" min="0" step="5"&gt;
      &lt;/div&gt;
  
      &lt;button type="button" id="start-btn"&gt;Start&lt;/button&gt;
      &lt;button type="button" id="pause-btn" disabled&gt;Pause&lt;/button&gt;
      &lt;button type="button" id="stop-btn" disabled&gt;Stop&lt;/button&gt;
    &lt;/section&gt;
  
    &lt;h2&gt;&lt;span id="minutes"&gt;0&lt;/span&gt; : &lt;span id="seconds"&gt;00&lt;/span&gt;&lt;/h2&gt;
  
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>