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

Question

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

After Selection of Number starting with 0

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>

Answer 1

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}")`);