Home/ Questions/Q 7075123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:08:23+00:00

i have my code(html/javascript) here which allows user to input the size and color

  • 0

i have my code(html/javascript) here which allows user to input the size and color of the square.The problem is when i click the go button the textfields disappear including the button and the one that displays is the output.Is there any ways that i could retain the textfields and the button then output the square below it?

<html>
<head>
<script type="text/javascript">
size=0;
function display(form){
    size=form.inputbox.value;
    color=form.inputbox2.value;
    for(i=0;i<size;i++){
            for(j=0;j<size;j++){
                if(i==0||i==(size-1)){
                        document.write("<font color="+color+">*&nbsp;");
                    }
                else if (j == 0||j == (size-1)) {
                        document.write("*&nbsp;");
                    }
                else {
                        document.write("&nbsp;&nbsp;&nbsp;");
                    }
            }
                    document.write("<br>");
        }

}
</script>
</head>
<body>
    <form name="form1" action="" method="get">
    Input size of the square:
        <input type="text" name="inputbox" value=""><br>
    Input color of the square:
        <input type="text" name="inputbox2" value="">

    <input type="button" name="button" value="Go" onClick="display(this.form)">
    </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Calling document.write on a page that has completed rendering will destroy the exiting DOM document on the page, replacing it with only the newly written HTML elements.

    If you wish to add to existing DOM elements, select an element and write to its innerHTML property instead.

    <html>
<head>
<script type="text/javascript">
size=0;
function display(form){
    size=form.inputbox.value;
    color=form.inputbox2.value;

    // A node to write into
    writeTo = document.getElementById('writeTo');

    for(i=0;i<size;i++){
            for(j=0;j<size;j++){
                if(i==0||i==(size-1)){
                        writeTo.innerHTML = writeTo.innerHTML + "<font color="+color+">*&nbsp;";
                    }
                else if (j == 0||j == (size-1)) {
                        writeTo.innerHTML = writeTo.innerHTML + "*&nbsp;";
                    }
                else {
                        writeTo.innerHTML = writeTo.innerHTML + "&nbsp;&nbsp;&nbsp;";
                    }
            }
                    writeTo.innerHTML = writeTo.innerHTML + "<br>";
        }

}
</script>
</head>
<body>
    <form name="form1" action="" method="get">
    Input size of the square:
        <input type="text" name="inputbox" value=""><br>
    Input color of the square:
        <input type="text" name="inputbox2" value="">

    <input type="button" name="button" value="Go" onClick="display(this.form)">
    </form>
    <div id='writeTo'></div>
</body>
</html>

    And add an empty node to your HTML something like:

    <div id='writeTo'></div>

    Here it is in action on jsFiddle.net

    To get the square to be all the correct color, it is easiest to change the CSS color property of <div id='writeTo'>

    document.getElementById('writeTo').style.color = color;
    • 0