0

I am a newbie to JS. Basically I am trying to hide certain options on a drop down form, depending on what options are selected on another form. This is on my Wordpress/Woocommerce site using a custom theme.

At this stage, I can't even select the form.

The HTML for the form looks like this:

<form action="https://buildninja.com.au/staging2023/shop-2/">
  <select data-name="filter_make">
    <option value="">Select make</option>
    <option value="make-ford">Ford</option>
    <option value="holden">Holden</option>
    <option value="kawasaki">Kawasaki</option>
    <option value="nissan">Nissan</option>
    <option value="toyota">Toyota</option>
  </select>
  <select data-name="filter_model">
    <option value="">Select model</option>
    <option value="280zx">280ZX</option>
    <option value="falcon">Falcon</option>
    <option value="hk-ht-hg">HK-HT-HG</option>
    <option value="ninja">Ninja</option>
    <option value="torana-lc-lj">Torana LC-LJ</option>
    <option value="torana-lh-lx">Torana LH-LX</option>
    <option value="vb-vc-vh-vk-vl">VB-VC-VH-VK-VL</option>
    <option value="vn-vp-vr-vs">VN-VP-VR-VS</option>
    <option value="vt-vy-vz-vx">VT-VY-VZ-VX</option>
    <option value="xd-xe-xf">XD-XE-XF</option>
    <option value="xw-xy">XW-XY</option>
  </select>
  <input type="submit" value="Go" />
</form>

And my Javascript looks like this (at this stage, I am just trying to select it):

const selectedMake = document.getElementsByTagName("option");

selectedMake.addEventListener("change", myFunction);

function myFunction() {
  console.log("This is working!");
}

(Note I have also tried getting it by different options, such as : const selectedMake = document.querySelectorAll('data-name[filter_make]');

However, when I do this I get the following error in the console: TypeError: selectedMake.addEventListener is not a function. (In ‘selectedMake.addEventListener(“change”, myFunction); ‘selectedMake.addEventListener’ is undefined)

I know the Javascript is working because I can do other things (e.g. show an alert box when you open the page), I just can't select this element.

Any help would be great!

Chris G
  • 1,598
  • 1
  • 6
  • 18
Georgie McWilks
  • 1
  • Add the event listener to the – João Paulo Macedo Jul 10 '23 at 12:37
  • You have 2 input select, I'm assuming you want to add the `eventListener` to the 1st one. Also `const selectedMake = document.querySelectorAll('data-name[filter_make]');` is not gonna work becuz you only have one element with that `data-attr` you have to use `querySelector` instead. `querySelectorAll` returns an array like object and is used when you have multiple elements you need to select – Chris G Jul 10 '23 at 12:41

0 Answers0