Javascript Click the specific button in a web page

Question

This is my working sample page https://graphicstogether.com/free-trial/

I'm using Wordpress contact form 7. The problem is when I click on the clear button on an attached file, it hit the send button. How do I control each button action individually?

**

I'm also facing an error with JS code. I've applied this JS code at the footer.

**

---

Html

<input type="file" name="file-860" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png,.gif,.pdf" aria-invalid="false">

<input type="file" name="file-860" size="40" class="wpcf7-form-control wpcf7-file" id="file2" accept=".jpg,.jpeg,.png,.gif,.pdf" aria-invalid="false">

Js

var f = document.querySelectorAll('input[type=file]'),
clearInput = function(){this.previousSibling.value = '';};
for(var i = 0; i < f.length; i++){
  button = document.createElement('button');
  button.textContent = 'clear';
  button.addEventListener('click', clearInput);
  f[i].parentNode.insertBefore(button, f[i].nextSibling);
}

Answer 1

为了不发送表单，按钮必须为type =“ button”，否则为type =“ submit”。

<button type="button">clear</button>