0

何度も繰り返される特定の文字を div に入力しようとしています。かなり基本的なタスクです。そう思ったので、次の JS メソッドを書きました。

<script>
            function populateTarget()
                {
                    var target = document.getElementById("div_target");
                    var nrSteps = parseInt(document.getElementById("nr").value);

                    for (var i=0;i<nrSteps;i++)
                        {
                            target.innerHTML+=("x");
                        }
                }
</script>

問題は、「x」が表示されますが、firebug をオンにしているときにのみ気付くことができるのはほんの一瞬です。

この関数は、次の形式のボタンでトリガーされます。

             <form>
                    Nr de caractere: <input type="text" value="1" id="nr"/>
                    <br/>
                    Caracterul dorit:
                    <select id="chr">
                      <option value="c">c</option>
                      <option value="b">b</option>
                      <option value="g">g</option>
                      <option value="o">o</option>
                    </select>
                    <br/>
                    <button onclick="populateTarget()"> Genereaza</button>
                </form>

これはdivです：

 <style >
    body
    {
        color: white;
        background-color: blue;
    }

    #div_target,#div_form
    {
        height: 300px;
        width: 300px;
        border:5px solid white;
    }

    #div_target
    {
        float: left;
        overflow: scroll;
    }
</style>

 <div id="div_target">
 </div>

この後、他の関数が div の内部 html を台無しにすることはありません。innerHTML に直接追加することは非常に洗練されていない方法であることはわかっていますが、より高度なものを記述する前に、文字を追加できることを確認したかっただけです。

私のコードのコードペン。

誰かが私が間違っていることについての考えを持っていますか?おそらく解決策は、私が純粋なJSのみを使用し、ライブラリを使用しないものですか?

4

1 に答える 1

1

関数を実行するイベントを発生させたときに、おそらくページをリロードしていますpopulateTargetか? たとえば、ボタンによってトリガーされる「.」などのアクションを含むフォームですか？

それはあなたが見ている行動を説明するでしょう。

関数が で終了したreturn false;場合、私の推測が正しければ、これを防ぐことができます。

于 2013-02-22T19:38:30.553 に答える