如何解决，Uncaught TypeError: videopath.addEventListener is not a function？

Question

I am calling a function on button click, but facing the issue of Uncaught

TypeError: videopath.addEventListener is not a function.

My HTML file.

I wanted to send the exact file path in my case which is a video path.

<div class="input-btn-container">
  <input class="input-box" id="videopath" type="file" />
  <div id="result"></div>
  <div class="btn-wrapper">
    <button class="renderbtn" onclick="runRender()">start</button>
  </div>
</div>

the function which I am calling here on calling this function getting error.

function runRender(){
  let client = "some functions";

  let videopath = document.getElementById('videopath').files[0].path;
  let result = document.querySelector('#result');

  // here I am getting error.
  videopath.addEventListener('input', () => {
    client.invoke("counter", videopath, (error, res) => {
      if(error) {
        console.error(error);
      } else {
        result.textContent = res;
      }
    });
  });

  videopath.dispatchEvent(new Event('input'));
}

Answer 1

There just needs a modification in the runRender() which should be like.

function runRender(){
  let client = "some functions";

  let videopath = document.getElementById('videopath');
  let vedioPathValue = vediopath.files[0].path;
  let result = document.querySelector('#result');

  // here I am getting error.
  videopath.addEventListener('input', () => {
    client.invoke("counter", vedioPathValue , (error, res) => {
      if(error) {
        console.error(error);
      } else {
        result.textContent = res;
      }
    });
  });

  videopath.dispatchEvent(new Event('input'));
}

this is working fine for me.

Answer 2

You are trying to add an event to a non-dom element and therefore you get this error, try this.

function runRender(){
    let client = "some functions";

    let videopath = document.getElementById('videopath').files[0].path;
    let videopathElment = document.getElementById('videopath');
    let result = document.querySelector('#result');

    // here I am getting error.
    videopathElment.addEventListener('input', () => {
        client.invoke("counter", videopath, (error, res) => {
            if(error) {
                console.error(error);
            } else {
                result.textContent = res;
            }
        });
    });
    videopathElment.dispatchEvent(new Event('input'));
}

Answer 3

Try this.

 function runRender() { let client = "some functions"; let videopath = document.getElementById('videopath'); let result = document.querySelector('#result'); // here I am getting error. videopath.addEventListener('input', () => { client.invoke("counter", videopath.value, (error, res) => { if (error) { console.error(error); } else { result.textContent = res; } }); }); videopath.dispatchEvent(new Event('input')); }

 <div class="input-btn-container"> <input class="input-box" id="videopath" type="file" /> <div id="result"></div> <div class="btn-wrapper"> <button class="renderbtn" onclick="runRender()">start</button> </div> </div>