How to output a reverse string using innerHTML?

Question

I'm trying to reverse a string and output the results using innerHTML. Nothing is output when I click the button.

    <input type="text" id="text">
    <button id="reversal">Reverse</button>
    <div id="results"></div>

<script type="text/javascript">

    var input1 = document.getElementById("text").value;
    var button = document.getElementById("reversal");
    var result = document.getElementById("results");

    var reversals = function(string) {
        result.innerHTML = string.split("").reverse().join("");
    }

    button.onlclick = function() {
        reversals(input1);
    }
</script>

Well, `button.onlclick` is only going to cause tears. Fix that rubbish up for starters. — enhzflep, Jul 18 '15 at 03:10

score 2 · Accepted Answer · answered Jul 18 '15 at 03:18

This is what you should do.

input1 = document.getElementById("text").value; should be assigned within onclick handler.

var button = document.getElementById("reversal");
var result = document.getElementById("results");

var reversals = function(string) {
    result.innerHTML = string.split("").reverse().join("");
}

button.onclick = function() {
    var input1 = document.getElementById("text").value;
    reversals(input1);
}

score 1 · Answer 2 · answered Jul 18 '15 at 03:18

1

As already mentioned you have a typo, you need to change button.onlclick to button.onclick. Next when you do a refersal it still has the value of text from when the document loaded, which is empty. You need to get the new value:

button.onclick = function() {
    var input1 = document.getElementById("text").value;
    reversals(input1);
}

answered Jul 18 '15 at 03:18

Spencer Wieczorek

21,229
7
44
54

Thanks for the explanation. – Almac Jul 18 '15 at 03:25

How to output a reverse string using innerHTML?

2 Answers2