I need to change the where the js inserts the text into the html currently it is always putting at the end and I need it to insert it at the start and push the others down. That is, if it inserts
<li>1</li>, <li>2</li>, <li>3</li>
it will keep it in that order I need the last one to always be listed first like
<li>3</li>, <li>2</li>, <li>1</li>
Here is the html
<div class="data">
<div class="stackleft" id="p1_stack"></div>
<div class="stackright" id="p2_stack"></div>
</div>
Here is the JavaScript
function drawStack(isFinal) {
var stackLength = Oscore[currentPlayer].stack.length;
var temp = "";
var tot = 0;
for (var i = 0; i < stackLength; i++) {
var val = Oscore[currentPlayer].stack[i];
temp += "<li>" + val + "</li>";
tot += val;
}
//if(!isFinal){
//temp = '<div class="workingScore">'+scoreTemp+'</div><br>' + temp;
//}
var writeSore = document.form1.game.value - tot;
writeit(writeSore, currentPlayer + "_score");
writeit(temp, currentPlayer + "_stack");
}
Try to loop backward:
for (var i = stackLength; i--; ) {
var val = Oscore[currentPlayer].stack[i];
temp += "<li>" + val + "</li>";
tot += val;
}
How about this:
temp = "<li>" + val + "</li>" + temp;
You were missing a quote in the code shown too (now fixed by someone's edit), probably wouldn't have worked at all as written originally.
EDIT: I think I like the loop backward approach better, but it's up to you what you think is clearest.
use prepend() from JQuery.....
Related
I have a block of code under a div element "questionform" and want to allow the code to repeat, depending on the number of times the user would like it to, to eventually allow the user to make a quiz.
I have tried to create a bit of javascript in order to repeat just the question number for now, but it won't work.
<div id="myHTMLWrapper">
</div>
<script>
var wrapper = document.getElementById("myHTMLWrapper");
var number = prompt("Enter the number of questions");
for (var i = 0; i = number - 1; i++) {
myHTML += '<span class="test">Question' + (i + 1) + '</span><br/><br/>';
}
wrapper.innerHTML = myHTML
</script>
any help will be appreciated, and please dont just point out flaws and not tell me how to improve them.
You have two issues in your code. firstly, you have to declare the variable myHTML outside the loop with empty string. Secondly, in the loop i = number - 1 will prevent the iteration of the loop, try i < number
<div id="myHTMLWrapper">
</div>
<script>
var wrapper = document.getElementById("myHTMLWrapper");
var number = prompt("Enter the number of questions");
var myHTML = '';
for (var i = 0; i < number; i++) {
myHTML += '<span class="test">Question ' + (i + 1) + '</span><br/><br/>';
}
wrapper.innerHTML = myHTML;
</script>
Though, here starting the loop iteration value from 1 with i <= number is more meaningful as this will allow you to use the value directly (without the increment) in the htmlString:
<div id="myHTMLWrapper">
</div>
<script>
var wrapper = document.getElementById("myHTMLWrapper");
var number = prompt("Enter the number of questions");
var myHTML = '';
for (var i = 1; i <= number; i++) {
myHTML += '<span class="test">Question ' + i + '</span><br/><br/>';
}
wrapper.innerHTML = myHTML
</script>
trying to prepend my list in jquery mobile but I just can't get the divider to be on top of the most recent item added to the listview.
I've tried prepending the item that's being added but it then switches the divider to the bottom.
function loadScanItems(tx, rs) {
var rowOutput = "";
var $scanItems = $('#scanItems');
$scanItems.empty();
var bubbleCount = 0;
for (var i = 0; i < rs.rows.length; i++) {
bubbleCount = bubbleCount + 1;
//rowOutput += renderScan(rs.rows.item(i));
var row = rs.rows.item(i)
var now = row.added_on;
var date = get_date(now);
rowOutput += '<li data-icon="false"><div class="ui-grid-b"><div class="ui-block-a" style="width:50%"><h3>Su # ' + row.sunum + '</h3><p> Bin # ' + row.binnum + '</p></div><p class="ui-li-aside"><strong>' + date + '</strong></p><div class="ui-block-b" style="width:20%"></div><div class="ui-block-c" style="width:25%"><br><p>User: ' + row.userid + '</p></div></div></li>';
// rowOutput += '<li>' + row.sunum + row.binnum+ "<a href='javascript:void(0);' onclick='webdb.deleteScan(" + row.ID + ");'>Delete</a></li>";
}
$scanItems.append('<li data-role="list-divider">Scanned Items <span class="ui-li-count">' + bubbleCount + '</span></li>').listview('refresh');
$scanItems.append(rowOutput).listview('refresh');
}
The code is above with it correctly formatted with the divider on top but the list items being appended to the bottom instead of prepended to the top.
Thanks!
The problem is that your are building a string with all the scan items. That string already has an order so whether you prepend or append makes no difference. Try this simple change.
Change:
rowOutput += '<li data-icon="false">...</li>';
to:
rowOutput = '<li data-icon="false">...</li>' + rowOutput;
This will put your rowOutput string in the correct order before appending to the listview.
Here is a working DEMO
I a trying to dynamically add rows and populate them with 3 col-sm-4 using a modulo against the number of objects in a returned object from a function.
Code:
function formatSeriesCard(series) {
var card = "";
console.log(countProperties(series));
for (var i=0; i < countProperties(series); i++) {
if (i % 3 == 0 ) {
card += "<div class=\"row\">";
}
card += "<div class='col-sm-4' data-id="+i+">";
card += "<div class='action-box'>";
card += "<h4>" + '"' + series.name + '"' + "</h4>";
card += "<p>";
Instead I'm getting each row nested within the previous. Thinking I need to test for the first one and last one. Thanks.
Here is something like what you want
Bootply : http://www.bootply.com/2xnJBpyVsS
JS :
var wantedcol=14;
var mycol='<div class="col-xs-4">mycol</div>';
var startRowLabel="<div class='row'>";
var endRowLabel="</div>";
var start = "";
var end="";
var toAppend="";
for(var i=0; i<wantedcol; i++){
start="";
if(i%3==0 || i==0){
start=startRowLabel;
}
end="";
if(i!=0 && (i%3==2 || i==wantedcol-1)){
end=endRowLabel;
}
console.log(start+mycol+end);
toAppend+=start+mycol+end;
}
$('.container').append(toAppend);
HTML:
<div class="container"></div>
Comment :
You just have to take care about when you have to insert the div.row opening and closing tags
EDIT: please see John S. answer below for the real issue behind this apparent problem!
I am building a dynamic expression with sharepointplus. It should return a logical value and it does just that. I have moved it into a variable, as I use it often (reference it as a condition for if). The problem is, apparently the plus sign is stopping the processing of the rest of the code. Here's two faulty snippets (no errors in console):
for (var i=0; i < data.length; i++){
var category_equal_test = ((data[i].getAttribute("category")) == (data[i+1].getAttribute("category")));
or
for (var i=0; i < data.length; i++){
var j=i+1;
var category_equal_test = ((data[i].getAttribute("category")) == (data[j].getAttribute("category")));
No difference between them really, but for a moment I thought I would get away with this.
Here's a snippet of code that does NOT break processing (But of course this code is pointless):
for (var i=0; i < data.length; i++){
var category_equal_test = ((data[i].getAttribute("category")) == (data[i].getAttribute("category")));
In both cases of the broken code, console.log(category_equal_test) outputs the set of logical values I am looking for.
I assume it is some kind of icompetence on my part, so please enlighten me! Thanks.
This is happening because at the very end of the loop, data[i + 1] becomes undefined and you can't do getAttribute of undefined, so it throws a TypeError.
var x; x.getAttribute('foo');
// TypeError: Cannot call method 'getAttribute' of undefined
To fix this, make your loop end an iteration earlier;
for (var i = 0; i < data.length - 1; i++) {
// ...
}
As for why you're not getting an error in the console, the code must be contained within a try..catch somewhere.
Here's what I have ended up using. I hope this is useful to somebody!
function osDrawPageMenuLeft() {
var spquery = "";
$SP().list("menu","/content").get({fields:"name, link, Level, Order, category"},function(data) {
spquery += "<ul>";
var j=0;
for (var i=0; i < data.length; i++){
if( i < data.length-1){
j=i+1;
var category_equal_test = ((data[i].getAttribute("category")) == (data[j].getAttribute("category")));
}
else{
category_equal_test=false;
}
var link_empty_test = (data[i].getAttribute("link") == null);
var header = data[i].getAttribute("name");
var header_link = "<a href='" + data[i].getAttribute("link") + "'>" + header + "</a>";
var row = "<li><a href='"+data[i].getAttribute("link")+"'>"+data[i].getAttribute("name")+"</a></li>";
if(data[i].getAttribute('Level') == 'Header'){
if (((category_equal_test)&&(!link_empty_test))){
spquery += "<li>" + header_link + "<ul>";
}
else if(((!category_equal_test)&&(!link_empty_test))){
spquery += "<li>" + header_link + "</li>";
}
else if(((category_equal_test)&&(link_empty_test))){
spquery += "<li>" + header + "<ul>";
}
else if(((!category_equal_test)&&(link_empty_test))){
spquery += "<li>" + header + "</li>";
}
}
else{
if((!category_equal_test)){
spquery += row + "</ul></li>";
}
else{
spquery += row;
}
}
};
spquery += "</ul>";
$('#newleftNav').append(spquery);
});
}
I want to know how I change all the pre tags inside a document...
I'm using this:
var preContent = document.getElementById('code').innerHTML;
but this only changes the content of 1 pre tag... the one with the ID 'code'.
If you can show me how i can change all the pre tags using JavaScript I appreciate
Here's all the code:
window.onload = function () {
var preContent = document.getElementById('code').innerHTML;
var codeLine = new Array();
var newContent = '<table width="100%" border="1" '
+ 'cellpadding="0" cellspacing="0" >';
codeLine = preContent.split('\n');
for (var i = 0; i < codeLine.length; i++) {
newContent = newContent + '<tr><td class="codeTab1" >'
+ i.toString() + '</td><td class="codeTab2">'
+ codeLine[i] + '</td></tr>';
}
newContent = newContent + '</table>';
document.getElementById('code').innerHTML = newContent;
}
PS: This is to make a look like a normal compiler with numbers before the line
PPS: Each pre tag will have a different content and I want the same script to change it (if possible).
You can use getElementsByTagName:
var preElements = document.getElementsByTagName('pre');
for(var i = 0; i < preElements.length; ++ i)
{
var element = preElements[i];
/* modify element.innerHTML here */
}
First problem in you code . No two elements in a document can have same id .
So you can change it easily with jquery . look at the code .
$('pre').html("what ever text you want to show ");
Or with javascript you can do like this :
var x = document.getElementsByTagName('pre');
for(var i = 0; i < x.length; ++ i)
{
x.innerHTML = "what ever text you want to show";
}