Using query selector all in javascript

Question

I have a form that has select boxes and when I select an option. I want it to display an input to and input field. I have done this just fine with an change event listener on the select boxes for one of them. My problem is I have 4 select boxes and 4 input values I want to do this to. I know I have to use query selector all and use are forEach loop but that is as far as I've gotten. When using the query selector all, should I have all the ID's on the select boxes the same or is it easier to just get all the select boxes from the query selector all?

My select boxes and inputs are all set up the same with the exception of different id names.

// codes for input boxes
let trimCode = '123456kj';
let chassisCode = 'ab123';
let finalCode = 'abcd1254';
let materialCode = 'mnb124578';
let qualityCode = 'abc123456';
let paintCode = 'zyf123';
let bodyCode = 'typ4598';

// event listener for one select box
currentDept.addEventListener('change', changeCode);

// changeCode function
function changeCode() {

  const x = currentDept.value;
  switch (x) {
    case "trim":
      classCode.value = trimCode;
      break;
    case "chassis":
      classCode.value = chassisCode;
      break;
    case "final":
      classCode.value = finalCode;
      break;
    case "material":
      classCode.value = materialCode;
      break;
    case "quality":
      classCode.value = qualityCode;
      break;
    case "paint":
      classCode.value = paintCode;
      break;
    case "body":
      classCode.value = bodyCode;
      break;
    default:
      console.log('something went wrong');
  }
}

<div class="form-control">
  <label for="current">Current Department</label>
  <select name="current" id="currentDept">
    <option value="trim" selected>Trim</option>
    <option value="chassis">Chassis</option>
    <option value="final">Final</option>
    <option value="material">Material</option>
    <option value="quality">Quality</option>
    <option value="paint">Paint</option>
    <option value="body">Body</option>
  </select>
  <small>Error Message</small>
</div>
<div class="form-control">
  <label for="classCode">Current Classification Code</label>
  <input type="text" id="classCode" placeholder="Enter Current Classification Code">
  <small>Error Message</small>
</div>

You should not repeat ids. Please show your attempt at what you are having an issue with. Also potentially helpful (given you were starting to think down the wrong repeating ids path): https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery/59888053#59888053 — Taplar, Apr 16 '20 at 20:04
so what ive tried so far and just take into effect im not that great at javascript, but what i tried was "const selectBoxes = document.querySelectorAll(select);" to get all the select boxes. but do i need to specify somehow the select boxes in the "form-control" div? and if i need to, how do you do that? then i added an event listener to the select boxes variable that is supposed to be a collection of all them, if i knew what i was doing like.... "selectBoxes.addEventListener('change', selectBoxesFun);" — Curious_Cat, Apr 16 '20 at 20:22
then my attempt at the selectboxesfun....................console.log(selectBoxes.value[0]); selectBoxes.forEach((item) => { selectBoxes[item].addEventListener('change', () => { console.log(item.value); }); }); — Curious_Cat, Apr 16 '20 at 20:24
`document.querySelectorAll(select)` <= If this is exactly the expression that you have, then you have a syntax error in that you left off the quotes around the `select`. In regards to your selector questions, my typical approach to situations like this would be to put a common class on the elements that you want to select and apply similar logic against, and select by that class. — Taplar, Apr 16 '20 at 20:24
so when you use document.get....any method do you grab the id from the html file with 'id name from the html file' with just single quotes? or does it have to be '.id name from html file' with a dot in front or "#" in front? same question with class names. can you just grab the class name or do you need a dot or "#" in front of the class name in the javascript file? — Curious_Cat, Apr 16 '20 at 20:34
If you use a `document.get*By*()` then you do not have to use the `#` or `.` syntax, because you are not giving it a selector string. You are giving it *specifically* what the method sayd it is finding element by. So there's no need to signify that. When you use `document.querySelector()` or `document.querySelectorAll()`, you *do* have to use the selector string notation because you have to tell it what you are looking for. But in all those cases, the value given to the function has to be a string; either a literal or a variable containing a string. — Taplar, Apr 16 '20 at 20:37

score 0 · Accepted Answer · answered Apr 17 '20 at 14:56

There may be an easier way to do this but after a little more research and a lot of trial and error i found this to work. so basically all i needed was "this.value"

for (var i = 0; i < selectBoxes.length; i++){
    selectBoxes[i].addEventListener('change', function(e) {
        // get the value of the select option list
        var optionValue = this.value;
        // console.log(optionValue);
        // get the index of the select box selected
        const x = [].indexOf.call(selectBoxes, e.target);
        // console.log(x);
        changeCode(optionValue, x);
    });
}

Using query selector all in javascript

1 Answers1