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

Javascript – Why does my input go crazy and repeat because of my substring?

I’m making a pi memorization game, and a while back I ran into a problem but found a solution, however my solution, deleting the start of the input after a certain point, turns out is messing up the order of things. For example, I currently have it set to delete the start at 10 but once I get to 3.141592653 it shows up .1415926533 instead of the last number being 5. Why does it keep replacing things and messing up the order? Also is there an easier way to do this, I’m very new to JavaScript and don’t know a lot of alternatives. It’s not finished obviously and I cut some irrelevant parts out but everything should work

I messed around with substrings and found out a way that works how I want but it still messes up and breaks how I described above. I don’t even know where to start

   const input = document.getElementById("input-field")

input.addEventListener("beforeinput", myFunction)

const numbers = "1234567890.".split("")

input.addEventListener("keyup", event => {
        const position = event.target.selectionStart
        if (position > 10){
        input.value = input.value.substring(1)

    }});


function myFunction(event) {
    if (event.data && !numbers.includes(event.data)) {
        event.preventDefault()
    } else if (event.data) {
        const charno = input.value.length

    if (pi[charno] != event.data) { 
            input.disabled = true
            event.preventDefault()
            
            function1()

            setTimeout(somethingFunction, 2000)

        }
    }
}


function function1() {input.value += pi[input.value.length]}

function somethingFunction() {  
    input.disabled = false
    input.value = ''

}


const pi = '3.14159265358979323846264338327950288419716939937510582097494459
2307816406286208998628034825342117067982148086513282306647093844609550582231
7253594081284811174502841027019385211055596446229489549303819644288109756659
3344612847564823378678316527120190914564856692346034861045432664821339360726
0249141273724587006606315588174881520920962829254091715364367892590360011330
5305488204665213841469519415116094330572703657595919530921861173819326117931
0511854807446237996274956735188575272489122793818301194912983367336244065664
3086021394946395224737190702179860943702770539217176293176752384674818467669
4051320005681271452635608277857713427577896091736371787214684409012249534301
4654958537105079227968925892354201995611212902196086403441815981362977477130
9960518707211349999998372978049951059731732816096318595024459455346908302642
5223082533446850352619311881710100031378387528865875332083814206171776691473
0359825349042875546873115956286388235378759375195778185778053217122680661300
1927876611195909216420198938095257201065485863278865936153381827968230301952
0353018529689957736225994138912497217752834791315155748572424541506959508295
3311686172785588907509838175463746493931925506040092770167113900984882401285
8361603563707660104710181942955596198946767837449448255379774726847104047534
6462080466842590694912933136770289891521047521620569660240580381501935112533
8243003558764024749647326391419927260426992279678235478163600934172164121992
4586315030286182974555706749838505494588586926995690927210797509302955321165
3449872027559602364806654991198818347977535663698074265425278625518184175746
7289097777279380008164706001614524919217321721477235014144197356854816136115
7352552133475741849468438523323907394143334547762416862518983569485562099219
2221842725502542568876717904946016534668049886272327917860857843838279679766
8145410095388378636095068006422512520511739298489608412848862694560424196528
5022210661186306744278622039194945047123713786960956364371917287467764657573
9624138908658326459958133904780275900994657640789512694683983525957098258226
2052248940772671947826848260147699090264013639443745530506820349625245174939
9651431429809190659250937221696461515709858387410597885959772975498930161753
9284681382686838689427741559918559252459539594310499725246808459872736446958
4865383673622262609912460805124388439045124413654976278079771569143599770012
9616089441694868555848406353422072225828488648158456028506016842739452267467
6788952521385225499546667278239864565961163548862305774564980355936345681743
2411251507606947945109659609402522887971089314566913686722874894056010150330
8617928680920874760917824938589009714909675985261365549781893129784821682998
9487226588048575640142704775551323796414515237462343645428584447952658678210
5114135473573952311342716610213596953623144295248493718711014576540359027993
4403742007310578539062198387447808478489683321445713868751943506430218453191
0484810053706146806749192781911979399520614196634287544406437451237181921799
9839101591956181467514269123974894090718649423196156794520809514655022523160
3881930142093762137855956638937787083039069792077346722182562599661501421503
0680384477345492026054146659252014974'
<input type="text" id="input-field">
Tags:

4

Answers


  1. 0

    Why do you do this line?

    input.value = input.value.substring(1)

    This breaks you code as you lose the 3 after the 10 position, thus shifting your index and giving back the wrong number. When you just comment this line, the rest works:

    const input = document.getElementById("input-field")

input.addEventListener("beforeinput", myFunction)

const numbers = "1234567890.".split("")

input.addEventListener("keyup", event => {
        const position = event.target.selectionStart
        if (position > 10){
        //input.value = input.value.substring(1)

    }});


function myFunction(event) {
    if (event.data && !numbers.includes(event.data)) {
        event.preventDefault()
    } else if (event.data) {
        const charno = input.value.length
    if (pi[charno] != event.data) { 
            input.disabled = true
            event.preventDefault()
            
            function1()

            setTimeout(somethingFunction, 2000)

        }
    }
}


function function1() {input.value += pi[input.value.length]}

function somethingFunction() {  
    input.disabled = false
    input.value = ''

}


const pi = '3.14159265358979323846264338327950288419716939937510582097494459
2307816406286208998628034825342117067982148086513282306647093844609550582231
7253594081284811174502841027019385211055596446229489549303819644288109756659
3344612847564823378678316527120190914564856692346034861045432664821339360726
0249141273724587006606315588174881520920962829254091715364367892590360011330
5305488204665213841469519415116094330572703657595919530921861173819326117931
0511854807446237996274956735188575272489122793818301194912983367336244065664
3086021394946395224737190702179860943702770539217176293176752384674818467669
4051320005681271452635608277857713427577896091736371787214684409012249534301
4654958537105079227968925892354201995611212902196086403441815981362977477130
9960518707211349999998372978049951059731732816096318595024459455346908302642
5223082533446850352619311881710100031378387528865875332083814206171776691473
0359825349042875546873115956286388235378759375195778185778053217122680661300
1927876611195909216420198938095257201065485863278865936153381827968230301952
0353018529689957736225994138912497217752834791315155748572424541506959508295
3311686172785588907509838175463746493931925506040092770167113900984882401285
8361603563707660104710181942955596198946767837449448255379774726847104047534
6462080466842590694912933136770289891521047521620569660240580381501935112533
8243003558764024749647326391419927260426992279678235478163600934172164121992
4586315030286182974555706749838505494588586926995690927210797509302955321165
3449872027559602364806654991198818347977535663698074265425278625518184175746
7289097777279380008164706001614524919217321721477235014144197356854816136115
7352552133475741849468438523323907394143334547762416862518983569485562099219
2221842725502542568876717904946016534668049886272327917860857843838279679766
8145410095388378636095068006422512520511739298489608412848862694560424196528
5022210661186306744278622039194945047123713786960956364371917287467764657573
9624138908658326459958133904780275900994657640789512694683983525957098258226
2052248940772671947826848260147699090264013639443745530506820349625245174939
9651431429809190659250937221696461515709858387410597885959772975498930161753
9284681382686838689427741559918559252459539594310499725246808459872736446958
4865383673622262609912460805124388439045124413654976278079771569143599770012
9616089441694868555848406353422072225828488648158456028506016842739452267467
6788952521385225499546667278239864565961163548862305774564980355936345681743
2411251507606947945109659609402522887971089314566913686722874894056010150330
8617928680920874760917824938589009714909675985261365549781893129784821682998
9487226588048575640142704775551323796414515237462343645428584447952658678210
5114135473573952311342716610213596953623144295248493718711014576540359027993
4403742007310578539062198387447808478489683321445713868751943506430218453191
0484810053706146806749192781911979399520614196634287544406437451237181921799
9839101591956181467514269123974894090718649423196156794520809514655022523160
3881930142093762137855956638937787083039069792077346722182562599661501421503
0680384477345492026054146659252014974'
    <input type="text" id="input-field">
    Login or Signup to reply.
  2. 0

    For example, I currently have it set to delete the start at 10 but once I get to 3.141592653 it shows up .1415926533 instead of the last number being 5. Why does it keep replacing things and messing up the order?

    Because input.value.substring(1) will remove the first char of input.

    You’re looking for: input.value.slice(10) to remove the first 10 digits.

    Keep in mind that the next iteration the offset of the user input is different since you’ve removed the first 10 digits. So you’ll need to remember that index to check seperate.

    const input = document.getElementById("input-field")

input.addEventListener("beforeinput", myFunction)

const numbers = "1234567890.".split("")

input.addEventListener("keyup", event => {
        const position = event.target.selectionStart
        if (position > 10){
        input.value = input.value.slice(10);

    }});


function myFunction(event) {
    if (event.data && !numbers.includes(event.data)) {
        event.preventDefault()
    } else if (event.data) {
        const charno = input.value.length

    if (pi[charno] != event.data) { 
            input.disabled = true
            event.preventDefault()
            
            function1()

            setTimeout(somethingFunction, 2000)

        }
    }
}


function function1() {input.value += pi[input.value.length]}

function somethingFunction() {  
    input.disabled = false
    input.value = ''

}


const pi = '3.14159265358979323846264338327950288419716939937510582097494459
2307816406286208998628034825342117067982148086513282306647093844609550582231
7253594081284811174502841027019385211055596446229489549303819644288109756659
3344612847564823378678316527120190914564856692346034861045432664821339360726
0249141273724587006606315588174881520920962829254091715364367892590360011330
5305488204665213841469519415116094330572703657595919530921861173819326117931
0511854807446237996274956735188575272489122793818301194912983367336244065664
3086021394946395224737190702179860943702770539217176293176752384674818467669
4051320005681271452635608277857713427577896091736371787214684409012249534301
4654958537105079227968925892354201995611212902196086403441815981362977477130
9960518707211349999998372978049951059731732816096318595024459455346908302642
5223082533446850352619311881710100031378387528865875332083814206171776691473
0359825349042875546873115956286388235378759375195778185778053217122680661300
1927876611195909216420198938095257201065485863278865936153381827968230301952
0353018529689957736225994138912497217752834791315155748572424541506959508295
3311686172785588907509838175463746493931925506040092770167113900984882401285
8361603563707660104710181942955596198946767837449448255379774726847104047534
6462080466842590694912933136770289891521047521620569660240580381501935112533
8243003558764024749647326391419927260426992279678235478163600934172164121992
4586315030286182974555706749838505494588586926995690927210797509302955321165
3449872027559602364806654991198818347977535663698074265425278625518184175746
7289097777279380008164706001614524919217321721477235014144197356854816136115
7352552133475741849468438523323907394143334547762416862518983569485562099219
2221842725502542568876717904946016534668049886272327917860857843838279679766
8145410095388378636095068006422512520511739298489608412848862694560424196528
5022210661186306744278622039194945047123713786960956364371917287467764657573
9624138908658326459958133904780275900994657640789512694683983525957098258226
2052248940772671947826848260147699090264013639443745530506820349625245174939
9651431429809190659250937221696461515709858387410597885959772975498930161753
9284681382686838689427741559918559252459539594310499725246808459872736446958
4865383673622262609912460805124388439045124413654976278079771569143599770012
9616089441694868555848406353422072225828488648158456028506016842739452267467
6788952521385225499546667278239864565961163548862305774564980355936345681743
2411251507606947945109659609402522887971089314566913686722874894056010150330
8617928680920874760917824938589009714909675985261365549781893129784821682998
9487226588048575640142704775551323796414515237462343645428584447952658678210
5114135473573952311342716610213596953623144295248493718711014576540359027993
4403742007310578539062198387447808478489683321445713868751943506430218453191
0484810053706146806749192781911979399520614196634287544406437451237181921799
9839101591956181467514269123974894090718649423196156794520809514655022523160
3881930142093762137855956638937787083039069792077346722182562599661501421503
0680384477345492026054146659252014974'
    <input type="text" id="input-field">
    Login or Signup to reply.
  3. 0

    You can just use substring instead of splitting

    function cut() {
    let pi = document.getElementById("pi").innerText;
    let start = document.getElementById("start").value;
    let end = document.getElementById("end").value;
    if (isNaN(start) || isNaN(end) || (start === "") || (end === "")) {
        alert("Please fill the numbers");
        return;
    }
    start = parseInt(start);
    end = parseInt(end);
    if (start > end) {
        alert("start cannot be greater than end");
        return;
    }
    if ((start < 0) || (end < 0)) {
        alert("negatives are not supported");
        return;
    }
    let dotlessPI = pi.replace(".", "");
    if (end > dotlessPI.length) {
        alert("out of bounds");
    }
    let substring = ((start === 0) ? "" : dotlessPI.substring(0, start));
    if (end + 1 < dotlessPI.length) substring += dotlessPI.substring(end + 1);
    if (start > 0) substring = substring.substring(0, 1) + "." + substring.substring(1);
    document.getElementById("output").innerText = substring;
}

document.getElementById("cut").addEventListener("click", cut);
    <p id="pi">3.14159265358979323846264338327950288419716939937510 58209749445923078164062862089986280348253421170679</p>
<input type="number" placeholder="start" id="start">
<input type="number" placeholder="end" id="end">
<input type="button" value="cut" id="cut">
<div id="output"></div>
    Login or Signup to reply.
  4. 0

    In the keyup-event you do

       input.value = input.value.substring(1);

    That will remove the first character, so "3.141592653" becomes ".141592653".

    And in myFunction you do

    const charno = input.value.length;

    You never compensates for that you potentially have removed characters. The length will, after a while, always be 10.

    So, when you in function1 do

      input.value += pi[input.value.length];

    You get the wrong character, since you never compensate for the characters that you have removed. Since [input.value.length never can be larger than 10, you get the character in index 10 from "3.141592653", which is "3" (remember the index is zero based).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search