title: Is there a way to have a dynamic html element linked to a javascript variable
body: <p>I'm used to using react for frontend dev, which makes this very easy. However with plain HTML and JS I'm at a loss. I'm essentially trying to replicate something like this</p>
  <pre><code>const [val, setVal] = useState(0)
  
  const increaseVal = () =&gt; {setVal(val + 1)}
  
  return (
    &lt;p&gt;{val}&lt;/p&gt;
  )
  </code></pre>
  <p>In which the (state) variable <code>val</code> is displayed dynamically. When <code>increaseVal()</code> is called, the value displayed will change.</p>
  <p>I am wondering if there is an easy way to do this with plain JS and HTML, or at least a convention to follow. My method at the moment is something along the lines of this</p>
  <pre><code>&lt;p id=&quot;val&quot;&gt;&lt;/p&gt;
  
  &lt;script&gt;
    let val = 0
  
    const increaseVal = () =&gt; {
      val += 1
      document.getElementById('val').innerText = val
    }
  &lt;/script&gt;
  </code></pre>
  <p>While this works fine for this example, my real use case involves dozens of different values being updated based on dozens of possible inputs. My best solution involves a function like this. Then appending this function at the bottom of any other function which handles any user input.</p>
  <pre><code>const updateValsDisplay = () =&gt; {
    document.getElementById('val1').innerText = val1
    document.getElementById('val2').innerText = val2
    document.getElementById('val3').innerText = val3
    etc...
  }
  </code></pre>
  <p>In theory this works fine, but it gets ugly pretty fast. Does anyone have any tips on a cleaner way to do this?</p>