title: Want to change video src with input field
body: <p>Beginner here using JavaScript for the first time. I want to have a video playing on my site, but when I input a certain word in the input field and submit it, I want it to change the <code>src</code> attribute of the video.</p>
  <p>I'd have five or six different words and each of those would have a different video &quot;assigned&quot; to them.</p>
  <p>Here's what I tried so far:</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>const myInputField = document.getElementById('field');
  const myButton = document.getElementById('button');
  const myVideo = document.getElementById('video');
  
  myButton.addEventListener("click", changeSrc);
  
  var a = myInputField.value;
  
  function changeSrc(event) {
    event.preventDefault();
  
    if (a === "BRUH") {
      myVideo.src = "vid2.mp4";
    } else {;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div&gt;
      &lt;form&gt;
        &lt;input type="text" id="field" oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);"&gt;
        &lt;button type="submit" id="button"&gt;CONFIRM&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;video src="vid1.mp4" id="video" width="640" height="480" loop="true" autoplay="autoplay" muted&gt;&lt;/video&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>