How can I prevent my program from converting selected number which starts with 0 to octal value using javascript?

user_11631346 0
Viewed 24

When I select a number that starts with 0, such a number is converted to its octal form which I don't want but works perfectly well for those that didn't start with 0. Attached is pictures explaining what I mean.

Before Selection of Number starting with 0

enter image description here

After Selection of Number starting with 0

enter image description here

From the picture you can see 0703 got converted to 451. How can I stop this.

let phoneNumberSelector = document.querySelector("#phone");
const mtnNumber = ['703', '706', '803', '806', '810', '813', '814', '816', '903', '906', '913', '0703', '0706'];

phoneNumberSelector.addEventListener('keyup', (e) => {
  removeElements();
  for (let i of mtnNumber) {
    // i = i.toString();
    if (i.startsWith(phoneNumberSelector.value) && phoneNumberSelector.value != '') {
      let listItem = document.createElement("li");
      listItem.classList.add('list-items');
      listItem.style.cursor = 'pointer';
      listItem.setAttribute('onclick', "displayNames(" + i + ")")
      let word = "<b>" + i.slice(0, phoneNumberSelector.value.length) + "</b>";
      word += i.slice(phoneNumberSelector.value.length);
      listItem.innerHTML = word;
      document.querySelector('.list').appendChild(listItem);
    }

  }

})

function displayNames(param) {
  phoneNumberSelector.value = param;
  removeElements();
}

function removeElements() {
  let items = document.querySelectorAll('.list-items')
  items.forEach((element) => {
    element.remove();
  });
}
<section class="section1"></section>
<section class="section2">
  <div class="reg-form">
    <form action="" method="">
      <div class="form-container">
        <h1 style="text-align: center;">Phonie</h1>

        <div class="input-reg email-input">
          <label for="username">Username</label>
          <input id="username" type="text" name="username">
        </div>
        <div class="list-div">
          <ul class="list"></ul>
        </div>

        <div class="input-reg email-input">
          <label for="phone">Phone Number</label>
          <input id="phone" type="text" name="phone">
        </div>

        <div class="input-reg email-input">
          <input class="submit-btn submit-btn2" type="submit" value="Check Number">
        </div>
      </div>
    </form>
  </div>
</section>

forms html javascript
1 Answers

The numbers are getting converted to octal because you are passing the number (of type string) to the displayNames function as a number (without quotes).

This is the offending line:

listItem.setAttribute('onclick', "displayNames(" + i + ")")

with the value of i set to "0703", the value for onclick becomes "displayNames(0703)".

You can fix this by adding quotes around the i variable in the string passed as onclick.

For example:

listItem.setAttribute('onclick', "displayNames('" + i + "')");

or with a string template to make it a bit easier to read:

listItem.setAttribute('onclick', `displayNames("${i}")`);
user_80686250
Related