如何讓我的 for 循環在打印之前運行？

Question

我在 html 中進行了此設置，以允許用戶輸入數字，然后單擊提交，我希望更改 output 框中將出現的周期數。 目前，只會打印一個句點（我知道這是調用條件部分中聲明的變量）。 我認為這意味着它在循環運行之前收集值，但我不知道如何解決這個問題。 請幫忙。 （如果需要，我很樂意提供代碼的 rest，但我很確定我已經隔離了問題。

    <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

基本上你的問題是在行var mathablenumber = +numberin.replace; . 我不知道它有什么作用，為什么需要它。 如果您的輸入字段是數字類型，它已經返回了數字類型值，您可以直接將其用於迭代

我對您的代碼進行了一些編輯：

 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

我不太確定你在這里的目標。 以為我會展示一些技術：

 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

好吧，我可能不完全明白你的意思，無論如何，如果你想讓你的代碼等待 for 循環，你可以簡單地讓它異步，試試這個

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

此外，當您在循環內一遍又一遍地初始化空格時，您會出現輸入錯誤。 那根本無法完成您的工作。 定義循環外的var spaces 。