CODEWITHSUNDEEP
javascript
sosro
sosro

Reputation: 35

output text to top rather than bottom

I have written a function to submit text into a container . the text gets added to the bottom of each block of text; I would like it to be added to the top of the previous text block rather than bottom.

Here is my code: 

function submit() {


var x = document.getElementById("text").value;
var y = document.getElementById("input").value;
var z = document.getDate;
if(x.length == 0 || y.length == 0 ){

    alert('please enter valid information');
    return false;
}


document.getElementById("output").innerHTML += Date() + "</br>" + "   </br>";
document.getElementById("output").innerHTML += y + "</br>" + "</br>";
document.getElementById("output").innerHTML += x + "</br>" + "</br>"; 
document.getElementById("text").value = "";
document.getElementById("input").value = "";

 return true;                     
}

Upvotes: 2

Views: 82

Answers (2)

andyg0808
andyg0808

Reputation: 1403

The variable += "text" statement is shorthand for variable = variable + "text" Thus, it will concatenate the text you provide it after the text already in the variable. In this case, the variable is the innerHTML property of the container. So the text is being concatenated to the end of the text already in the container.

But you want the new text concatenated before the existing text. So you'll have to read the existing text out of the container, then concatenate it to the end of the new text, something like this: variable = "text" + variable.

You might think you could do something like this:

document.getElementById("output").innerHTML = Date() + "</br>" + "   </br>" + document.getElementById("output").innerHTML;
document.getElementById("output").innerHTML = y + "</br>" + "</br>" + document.getElementById("output").innerHTML;
document.getElementById("output").innerHTML = x + "</br>" + "</br>" + document.getElementById("output").innerHTML;

But you'll find that that doesn't do what you want either, as it will make the container contents be in reverse order. That, of course, happens because the innerHTML in each step includes the results of the previous step. This leaves two options: either add all the text in one lump, or add it to a string separately and then prepend that to the contents of the container. An example of the latter:

var new_data = Date() + "</br>" + "   </br>";
new_data = new_data + y + "</br>" + "</br>";
new_data = new_data + x + "</br>" + "</br>";
document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML;

Of course, since the second and third lines of the snippet above are appending the values y + "</br>" + "</br>" and x + "</br>" + "</br>" to the end of new_data, the code could be written as

var new_data = Date() + "</br>" + "   </br>";
new_data += y + "</br>" + "</br>";
new_data += x + "</br>" + "</br>";
document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML;

Notice the use of += to do the appending!

Upvotes: 0

Ernesto Mayoral Cabezas
Ernesto Mayoral Cabezas

Reputation: 737

Just reasign the innerhtml after the added content, like this:

function submit() {


var x = document.getElementById("text").value;
var y = document.getElementById("input").value;
var z = document.getDate;

if(x.length == 0 || y.length == 0 ){

    alert('please enter valid information');
    return false;
}


document.getElementById("output").innerHTML = Date() + "</br></br>" + y +       
    "</br></br>"+ x +"</br></br>" +document.getElementById("output").innerHTML;

document.getElementById("text").value = "";
document.getElementById("input").value = "";



return true;                     
}

Thats assuming you are not using Jquery, otherwhise just use .prepend()

Upvotes: 1

Related Questions