如何让我的 for 循环在打印之前运行？

Question

I have this set up in html to allow a user to input a number, then click submit, and I am hoping to change how many periods will come out in the output box. Currently, just one period will print (I know this is calling to the variable declared in the conditional portion). I assume this means it is collecting the value before the loop runs, but I don't know how to fix that. Please help. (I'm happy to provide the rest of the code if needed but I'm fairly certain I have isolated the problem.

    <script type="text/javascript">
    function makepyramid() {
        var numberin = document.getElementById("numberin");
        var pyramid = numberin.value;
        var mathablenumber = +numberin.replace;
        for (n = 0, spaces ="."; n < mathablenumber; n++)
            {
            var spaces = spaces +=".";
        }
        var txtOutput = document.getElementById("txtOutput");
        txtOutput.value = "Hi there, " + spaces + "!"
    } // end makepyramid
</script>

Answer 1

Basically your problem is in the row var mathablenumber = +numberin.replace; . I dont know what does it do and why do you need it. If your input field is number type it already returns you the number type value and you can use it for iteration directly

I have edited your code a little:

 function makepyramid() { var numberin = document.getElementById("numberin"); var pyramid = numberin.value; // You can leave as one line as well //for (var n = 0, spaces = '.'; n < pyramid; n++) spaces +="."; for (var n = 0, spaces = '.'; n < pyramid; n++) { spaces +="."; } var txtOutput = document.getElementById("txtOutput"); txtOutput.value = "Hi there, " + spaces + ";" } // end makepyramid makepyramid();

 <input id="numberin" value="5" type="number" /> <input id="txtOutput" type="text"/>

Answer 2

I'm not really sure of your goal here. Thought I'd show some technique:

 let doc, htm, bod, nav, M, I, mobile, S, Q, aC, rC, tC, CharPyramid; // for use on other loads addEventListener('load', ()=>{ doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = nav.userAgent.match(/Mobi/i)? true: false; S = (selector, within)=>{ var w = within || doc; return w.querySelector(selector); } Q = (selector, within)=>{ var w = within || doc; return w.querySelectorAll(selector); } aC = function(){ const a = [...arguments]; a.shift().classList.add(...a); return aC; } rC = function(){ const a = [...arguments]; a.shift().classList.remove(...a); return rC; } tC = function(){ const a = [...arguments]; a.shift().classList.toggle(...a); return tC; } CharPyramid = function(char = '*'){ this.char = char; this.build = height=>{ let p = M('div'); for(let i=1,r,c=this.char,l=height+1; i<l; i++){ r = M('div'); p.appendChild(r); for(let n=0,d; n<i; n++){ d = M('div'); d.textContent = c; r.appendChild(d); } } return p; } } // magic happens below const pyr_chars = I('pyr_chars'), pyr = I('pyr'), cp = new CharPyramid('.'), pyr_er = I('pyr_er'); pyr.appendChild(cp.build(+pyr_chars.value)); pyr_chars.oninput = function(){ let v = this.value; if(v.match(/^[1-9][0-9]*$/)){ aC(this, 'yes'); pyr_er.textContent = pyr.innerHTML = ''; pyr.appendChild(cp.build(+v)); } else{ rC(this, 'yes'); pyr.innerHTML = ''; pyr_er.textContent = 'Numbers Only'; } } }); //

 *{ box-sizing:border-box; } btml,body{ background:#ccc; } label,input,.er{ font:bold 22px Tahoma, Geneva, sans-serif; } label{ color:#fff; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; } input{ width:100%; color:#000; padding:3px 5px; border:1px solid #c00; border-radius:3px; margin-top:2px; } input.yes{ border-color:#0c0; }.er{ color:#a00; font-size:14px; text-align:center; margin-top:3px; }.pyr{ margin-top:10px; text-align:center; }.pyr>div{ display:inline-block; background:#fff; color:#0b0; text-align:center; }.pyr>div>div>div{ display:inline-block; }

 <label for='pyr_chars'>Pyramid Height:</label> <input class='yes' id='pyr_chars' type='number' value='9' min='1' /> <div class='er' id='pyr_er'></div> <div class='pyr' id='pyr'></div>

Answer 3

Well, I may not get your point exactly, anyway if you want to make your code be waiting for the for loop you can simply make it async, try this

async function processArray(array) {
  array.forEach(item => {
    // define synchronous anonymous function
    // IT WILL THROW ERROR!
    await func(item);
  })
}

Also, you have a mistyping when you are initializing the spaces over and over again inside the loop. that will not get your work done at all. define the var spaces outside the loop.