I need to rearrange the order of my lines while preserving the styling of words and the sequence I have created.
Code Snippet:
<textarea id="mytext"">
Buy - 3 Potatoes $6.25
Sold - 3 Napkins $7.12
Buy - 5 Fries $11.62
Sold - 7 Potatoes $14.32
</textarea>
<div id = "myresult"></div>
Although I have structured the words correctly with appropriate styles, now I need to reverse the ordering of the lines. I am using notepad++ and still in the early stages of learning JavaScript.
JavaScript:
var mytext = document.getElementById('mytext');
var result = document.getElementById('myresult');
var lines = mytext.value.split('<br>');
result.innerHTML = '';
for(let i = 0;i < lines.length;i++){
var line = lines[i];
var list = [];
list.unshift(line);
list.unshift("<br>");
var word = line.split(' ');
var n1 = line.match(/[0-9]+/g);
var n2 = line.match(/[0-9]+\.[0-9]+/g);
var check = line.match(/Buy/);
var check2 = line.match(/Sold/);
if(check) {
result.innerHTML += "<span style='color:green;'>" + word[0] + "</span>" + ' ' + word[2] + ' ' + word[3] + ' total:$' + (n1[0]*[n2]).toFixed(2) + "<br>";
}
else if(check2) {
result.innerHTML += "<span style='color:blue;'>" + word[0] + "</span>" + ' ' + word[2] + ' ' + word[3] + ' total: $' + (n1[0]*[n2]).toFixed(2) + "<br>";
}
else {
result.innerHTMl + " ";
}
}
Even though I have set up the colors and fixed the display order, the last step is to reverse the lines and show them through innerHTML.
The original plan was to use an array[], and then within every loop iteration, try to unshift the line along with
but it resulted in errors like a bunch of commas or random words being displayed without any colors.
The desired outcome should resemble what is generated after running the code snippet. The updated innerHTML should be visible inside the div container.
<div id="result">
<span style='color:blue;'>Sold</span> 7 Potatoes total: $100.24<br>
<span style='color:green;'>Buy</span> 5 Fries total: $58.1<br>
<span style='color:blue;'>Sold</span> 3 Napkins total: $21.36<br>
<span style='color:green;'>Buy</span> 3 Potatoes total: $18.75<br>
</div>