Question 244407 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Change the value of a selected element depending on a input

I have this code

const salary = document.querySelector('#salary').value;
const brand = document.querySelector('#brands');


function firstDigit(salary) {
    // 1: get first digit using regex pattern
    const matches = String(salary).match(/d/);
    // 2: convert matched item to integer
    const digit = Number(matches[0]);
    // 3: add sign back as needed
    return (num < 0) ? -digit : digit;
}

let firstNumSalary = firstDigit();

salary.addEventListener("change", changeBrandValue);
function changeBrandValue() {
    if (firstNumSalary == 1) {
        brand.value = 'ford';    
    } else if (firstNumSalary == 6) {
        brand.value = 'mercedes';
    }
}
<label for="brands">Choose a brand:</label>
<select name="brands" id="brands">
    <option value="ford">Ford</option>
    <option value="audi">Audi</option>
    <option value="nissan">Nissan</option>
    <option value="opel">Opel</option>
    <option value="mercedes">Mercedes</option>
</select>

<label for="salary">Your salary:</label>
<input type="text" name="salary" id="salary">

I would like to change the selected value depending on the first digit of the input. For example if a user inputs a number that its first digit is 6 then the selected option will be Mercedes.

I tried the above code but it does not seem to work.

Tags:

3

Answers


  1. 0

    You have many issues with your code.

    1. The place you set firstNumSalary is not correct. It will evaluated at the first time only and after changing the value it won’t get re evaluate. You need to move it inside changeBrandValue() function. Also pass salary value in function like firstDigit(salary.value);.
    2. Use const salary = document.querySelector('#salary'); instead of const salary = document.querySelector('#salary').value;
    3. Correct return statement in firstDigit it should be like return (digit < 0) ? -digit : digit;

    Try like below

    const salary = document.querySelector('#salary');
const brand = document.querySelector('#brands');

function firstDigit(salary) {
  // 1: get first digit using regex pattern
  const matches = String(salary).match(/d/);
  // 2: convert matched item to integer
  const digit = Number(matches[0]);
  // 3: add sign back as needed
  return (digit < 0) ? -digit : digit;
}


salary.addEventListener("change", changeBrandValue);

function changeBrandValue() {

  let firstNumSalary = firstDigit(salary.value);

  if (firstNumSalary == 1) {
    brand.value = 'ford';
  } else if (firstNumSalary == 6) {
    brand.value = 'mercedes';
  }
}
    <label for="brands">Choose a brand:</label>
<select name="brands" id="brands">
  <option value="ford">Ford</option>
  <option value="audi">Audi</option>
  <option value="nissan">Nissan</option>
  <option value="opel">Opel</option>
  <option value="mercedes">Mercedes</option>
</select>

<label for="salary">Your salary:</label>
<input type="text" name="salary" id="salary">
    Login or Signup to reply.
  2. 0 
    const salary = document.querySelector('#salary');
const brand = document.querySelector('#brands');


function firstDigit(salary) {
    // 1: get first digit using regex pattern
    const matches = salary.match(/d/);
    // 2: convert matched item to integer
    const digit = Number(matches[0]);
    // 3: add sign back as needed
    return (digit < 0) ? -digit : digit;
}


salary.addEventListener("change", changeBrandValue);
function changeBrandValue(event) {
    let target = event.target;
    if (!target.value) {
       return;
    }
    let firstNumSalary = firstDigit(target.value);
    if (firstNumSalary == 1) {
        brand.value = 'ford';    
    } else if (firstNumSalary == 6) {
        brand.value = 'mercedes';
    }
}
    <label for="brands">Choose a brand:</label>
<select name="brands" id="brands">
    <option value="ford">Ford</option>
    <option value="audi">Audi</option>
    <option value="nissan">Nissan</option>
    <option value="opel">Opel</option>
    <option value="mercedes">Mercedes</option>
</select>

<label for="salary">Your salary:</label>
<input type="text" name="salary" id="salary">
    Login or Signup to reply.
  3. 0

    There were several issues which needed to be fixed in your code:

    1. const salary should only be the element selection – you can extract the value dynamically when called.

    2. the declaration of firstNumSalary should be within the event listener – this way it updates whenever the change occurs.

    3. You do not need to pass in salary as a parameter for the firstDigit.

    const salary = document.querySelector('#salary');
const brand = document.querySelector('#brands');


function firstDigit() {
    // 1: get first digit using regex pattern
    const matches  = String(salary.value).match(/d/);
    // 2: convert matched item to integer
    const digit = Number(matches[0]);
    // 3: add sign back as needed
    return (digit < 0) ? -digit : digit;
}



salary.addEventListener("change", changeBrandValue);
function changeBrandValue() {
    let firstNumSalary = firstDigit();

    if (firstNumSalary == 1) {
        brand.value = 'ford';    
    } else if (firstNumSalary == 6) {
        brand.value = 'mercedes';
    }
}
    <label for="brands">Choose a brand:</label>
<select name="brands" id="brands">
    <option value="ford">Ford</option>
    <option value="audi">Audi</option>
    <option value="nissan">Nissan</option>
    <option value="opel">Opel</option>
    <option value="mercedes">Mercedes</option>
</select>

<label for="salary">Your salary:</label>
<input type="text" name="salary" id="salary">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search