Dynamically changing a value in a function with Javascript using input text fields

Question

I'm not sure if the title makes sense, but I'm trying to dynamically change the value of a variable in a loop through a text input.

Take a look at my code so far

<script type="text/javascript">

function test() {

    var count;
    var str = document.getElementById('inputter').value;
    var plus = str;

    for(count = 0; count < 5; count++, str += plus){

        document.write("<br />");
        document.write(str);

    }
};

</script>

<input type="text" id="inputter" name="inputter"></form>
<button id="sub"  type="button" onclick="test()">Try It Out</button>

so if you hit the button with whatever you put in as a value in the text field, say for example... You put "X" the result would be...

X

XX

XXX

XXXX

XXXXX

but then the form field disappears and I would have to refresh the page to do it again? Is there a way I can do this dynamically? So without refreshing, I would like to be able to type in a new string, and it would change.

Thanks in advance!

You want that the older X be replaced by the new string value? — Orelsanpls
– Orelsanpls, Commented Jun 5, 2014 at 19:08

Barmar · Accepted Answer · 2014-06-05 19:12:23Z

1

document.write() is overwriting your page. Don't use it, use DOM modification functions to put the string in a DIV.

<input type="text" id="inputter" name="inputter"></form>
<button id="sub"  type="button" onclick="test()">Try It Out</button>
<div id="output"></div>

<script>
function test() {

    var count;
    var str = document.getElementById('inputter').value;
    var plus = str;
    var output = '';
    for(count = 0; count < 5; count++, str += plus) {
        output += "<br />" + str;
    }
    document.getElementById('output').innerHTML = output;
};
</script>

DEMO

answered Jun 5, 2014 at 19:12

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devjalvarezrom · Accepted Answer · 2014-06-05 19:27:47Z

use a div and fill with data:

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form>
        <input type="text" id="inputter" name="inputter">
        <button id="sub" type="button" onclick="test()">Try It Out</button>
    </form>

    <div id="theText"></div>

    <script type="text/javascript">
        function test() {

            var count;
            var str = document.getElementById('inputter').value;
            var plus = str;
            var theText = document.getElementById('theText');

            for (count = 0; count < 5; count++) {
                str += plus;
                theText.innerHTML = theText.innerHTML + str + '<br/>';
            }
        };
    </script>
</body>
</html>

Nano · Accepted Answer · 2014-06-05 19:06:38Z

0

Do you mean something like this?:

var str;

function test() {

    var str += document.getElementById('inputter').value;
    document.write("<br />");
    document.write(str);

}

answered Jun 5, 2014 at 19:06

Nano

1,3976 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Dynamically changing a value in a function with Javascript using input text fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related