我的代码有什么问题？ (JavaScript)

Question

I'm coding in JS, I'm a beginner, and I'm trying to make a somewhat game? I guess you could say. Anyway, here's the code

<script>
    var FromStart = 0
    document.write("|");
    for (i = 0; i < FromStart; i++) {
    document.write("_");
    }
    document.write("O");
    for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
    }
    document.write("|");

    function Left() {
      var FromStart += 1;
    document.write("|");
    for (i = 0; i < FromStart; i++) {
    document.write("_");
    }
    document.write("|");
    for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
    }
    document.write("|");
    }


    function Right() {
    var FromStart += -1;
    document.write("|");
    for (i = 0; i < FromStart; i++) {
    document.write("_");
    }
    document.write("|");
    for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
    }
    document.write("|");
    }

    </script><br>
    <button onclick="Left()">←</button>
    <button onclick="Right()">→</button>

This code isn't working, I don't know why. Here's what I want it to be like:

|_O_____________________| and then you press the right button 2 times, lets say... |___O___________________| so that's how it'll work. You basically press the left button to go left, right button to go right. Simple, or so I think.

Answer 1

Here are my comments in a workable form in a jsfiddle:

http://jsfiddle.net/yn2283c3/

Other than some small changes I made to make the jsfiddle work (like adding jquery as a library because document.write isn't allowed in jsfiddle, and like making the click events be handled by jquery, and like adding <br /> tags at the end of each sequence of characters), it works as you described.

var FromStart = 0
document.write("|");
for (i = 0; i < FromStart; i++) {
    document.write("_");
}
document.write("O");
for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
}
document.write("|<br />");

function Left() {
   FromStart += -1;
document.write("|");
for (i = 0; i < FromStart; i++) {
    document.write("_");
}
document.write("O");
for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
}
document.write("|<br />");
}


function Right() {
FromStart += 1;
document.write("|");
for (i = 0; i < FromStart; i++) {
    document.write("_");
}
document.write("O");
for (i = 0; i < 30-FromStart; i++) {
    document.write("_");
}
document.write("|<br />");
}