My javascript is not working in the way i want it to.
I have a textbox and a progresbar.
The javascript has to read the string from the textbox (TbProd1) and look which string it is. Every string has a different value in the progresbar (25%, 50% and 100%).
The textbox has 3 different options:
1: Vrijgegeven
2: Gepicked
3: Voltooid
The script wont compare my textbox string. Can somebody find my mistake?
Here is my code:
<script>
function move1() {
var textarea1 = document.getElementById('TbProd1');
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
if (textValue == (word1)) {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)) {
var elem = document.getElementById("myBar");
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var elem = document.getElementById("myBar");
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
<div>
<asp:TextBox ID="TbProd1" runat="server"></asp:TextBox></div>
<div id="myProgress">
<div id="myBar">
<div id="LblProgBar1">0%</div>
</div>
</div>
</div>
</form>
</body>
</html>
<asp:TextBox> after compiling has unique identifier. So seems you can't find this control by 'TbProd1'. Try to use "ClientIDMode"="Static" first.
<asp:TextBox ID="TbProd1" runat="server" ClientIDMode="Static"></asp:TextBox>
How do you hook up the event to the textbox? The code itself does work, so I wonder if it isn't either an issue with the ID from the TextBox being different from what you expect or the event just not calling the move1() function.
function move1() {
var textarea1 = document.getElementById('TbProd1');
var word1 = "Vrijgegeven";
var word2 = "Gepicked";
var word3 = "Voltooid";
var textValue = textarea1.value;
if (textValue == (word1)) {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word2)) {
var elem = document.getElementById("myBar");
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
else if (textValue == (word3)) {
var elem = document.getElementById("myBar");
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("LblProgBar1").innerHTML = width * 1 + '%';
}
}
}
}
<form id="form1" runat="server">
<div id="content">
<div>
<input type="text" onkeyup="move1()" id="TbProd1" />
<div id="myProgress">
<div id="myBar">
<div id="LblProgBar1">0%</div>
</div>
</div>
</div>
</form>
try this getElementById
var textarea1=document.getElementById('<%=TbProd1.ClientID %>').value;
i think your problem is solved this solution
Related
I have a one-page website with a section for a progress bar. I have a function for animation and all that, and I know how to start it when the page loads. But I don't know how to start it when I scroll to that section.
JS code :
window.onload = function() {
move();
};
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
If you want to trigger on scroll, you could do that through jquery.
$(element).scroll(() ={
function ()
}
But if you want to animate on scroll, I'd advise you to use a library called Gsap. Look in the scrollTrogger document.
Simply use the scroll event on the whole document:
document.addEventListener('scroll', function(e) {
move();
});
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 95) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
<div style="height:1000px;width:100%;">
<div style="height:200px">padding</div>
<div id="myBar" style="background:green;">my bar</div>
</div>
I'm developing an incremental game here is the link for visual reference:
https://code.sololearn.com/WF65X6DEns7o/#css
The problem i have is that buttons can be clicked unlimited times and INCOME value will go into the negative.
How can disable the button if the player doesn't have enough INCOME to click the button
function buttonOne() {
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned : " + a;
income -= 500;
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now let's watch as your money starts to generate slowly but surely. < p > After all no empire was built in a day. < p > When you have enough money you can buy more units. " ;
window.setInterval(function move() {
var elem = document.getElementById("myprogbar1");
var width = 1;
var id = setInterval(frame, 4);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 1000)
}
function buttonTwo() {
b++;
document.getElementById("btnLabel2").innerHTML = " Units Owned : " + b;
income -= 1000;
window.setInterval(function move() {
var elem = document.getElementById("myprogbar2");
var width = 1;
var id = setInterval(frame, 9);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 2000)
}
function buttonThree() {
c++;
document.getElementById("btnLabel3").innerHTML = " Lofts Owned : " + c;
income -= 2000;
window.setInterval(function move() {
var elem = document.getElementById("myprogbar3");
var width = 1;
var id = setInterval(frame, 19);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 3000)
}
<div id="gameMoneyBG">
<div id="gameMoney"> Income : $ 500 </div</div>
<button id="buttonOne" onclick="buttonOne()">
<b>Small Units</b></button>
<div id="progbar1">
<div id="myprogbar1"> </div>
</div>
<br /> <br />
<div id="btnLabel1"> Units Owned : 0 </div>
<div id="costLabel1">
Unit Cost : $ 500 </div>
<br /><br />
<button id="buttonTwo" onclick="buttonTwo()"><b>Large Units</b></button>
<div id="progbar2">
<div id="myprogbar2"> </div>
</div>
<br /><br />
<div id="btnLabel2"> Units Owned : 0 </div>
<div id="costLabel2"> Unit Cost : $ 1000 </div>
<br /><br />
<button id="buttonThree" onclick="buttonThree()"><b>City Lofts</b></button>
<div id="progbar3">
<div id="myprogbar3"> </div>
</div>
<br /><br />
<div id="btnLabel3"> Lofts Owned : 0 </div>
<div id="costLabel3"> Loft Cost : $ 2000 </div>
paste the code with each function after income -=num .It will restrict the value below 0 .its ternary operator
income= income < 0 ? 0 :income;
Js Code
var income = 500;
var a = 0;
var b = 0;
var c = 0;
alert("Welcome to my game. It took me 2 days to create it. I hope you enjoy it. \n\nPlease note that you get best experience on a PC not on a mobile. \n\n Also please ignore any bugs you may find, but feedback on improvement is welcome.")
function buttonOne() {
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned : " + a;
income-=500;
income= income < 0 ? 0 :income;
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts to generate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar1");
var width = 1;
var id = setInterval(frame, 4);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 1000)
}
function buttonTwo() {
b++;
document.getElementById("btnLabel2").innerHTML = " Units Owned : " + b;
income-=1000;
income= income < 0 ? 0 :income;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar2");
var width = 1;
var id = setInterval(frame, 9);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 2000)
}
function buttonThree() {
c++;
document.getElementById("btnLabel3").innerHTML = " Lofts Owned : " + c;
income-=2000;
income= income < 0 ? 0 :income;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar3");
var width = 1;
var id = setInterval(frame, 19);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 3000)
}
window.setInterval(function() {
if (a >= 1)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a*5);
if(a>=25)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *10);
if(a>=50)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=a *20);
}, 1000)
window.setInterval(function() {
if (b >= 1)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b);
if (b >= 25)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*4);
if (b >= 50)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=b+49*b*8);
}, 2000)
window.setInterval(function() {
if (c >= 1)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c);
if (c >= 25)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*4);
if (c >= 50)
document.getElementById("gameMoney").innerHTML = " Income : $ " + (income+=c+99*c*8);
}, 3000)
function income(){
if (income >= 1000000)
document.getElementById("HeaderLabel").innerHTML = "You have been caught for tax evasion. The Government will now take $500 000." ;
}
You can check if the income is below some thresold and then call:
document.getElementById("btnLabel1").disabled = true;
When the income gets higher you can set it back to false.
Lets beautify your code a bit:
var values=[
{value:0,sign,bar,desc:"Units",cost:0},
{value:0,sign,bar,desc:"Units",cost:500},
{value:0,sign,bar,desc:"Lofts",cost:2000}
];
//init the dom on load
window.addEventListener("load",function(){
//assign all labels
[document.getElementById("btnLabel1"),document.getElementById("btnLabel2"),document.getElementById("btnLabel3")].forEach((el,i)=>values[i].sign=el);
//assign all progressbars:
[document.getElementById("myprogbar1"),document.getElementById("myprogbar2"),document.getElementById("myprogbar3")].forEach((el,i)=>values[i].bar=el);
});
function increase(id){
//check if user can effort
if(income<values[id].cost) return alert("Sorry you cant effort :(");
//decrease income
income-=values[id].cost;
//set label
values[id].sign.innerHTML = values[id].desc+" Owned : " + (++values[id].value);
//show some cool animation:
var width=1;
values[id].animation=values[id].animation || setInterval(function(){
width=(1+width)%100;
values[id].bar.style.width = width + '%';
},10);
}
function buttonOne() {
increase(0);
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts togenerate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;
}
function buttonTwo() {
increase(1);
}
function buttonThree() {
increase(2);
}
You may increase income:
window.setInterval(_=>income++,10);
Ok i fix the button events, if you put these it works perfectly perfectly
function buttonOne() {
if (income-500>=0){
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned : " + a;
income-=500;
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets watch as your money starts to generate slowly but surely. <p> After all no empire was built in a day. <p> When you have enough money you can buy more units." ;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar1");
var width = 1;
var id = setInterval(frame, 4);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 1000)
}
}
function buttonTwo() {
if (income-1000>=0){
b++;
document.getElementById("btnLabel2").innerHTML = " Units Owned : " + b;
income-=1000;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar2");
var width = 1;
var id = setInterval(frame, 9);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 2000)
}
}
function buttonThree() {
if (income-2000>=0){
c++;
document.getElementById("btnLabel3").innerHTML = " Lofts Owned : " + c;
income-=2000;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar3");
var width = 1;
var id = setInterval(frame, 19);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 3000)
}
}
I just checked if your money less the unit cost would be static greater or equal to zero
if (income-2000>=0){ ... }
First of all as I saw that each function reduces the income with a different value. So first of all define constant integers and set these values in them.
And about your code you can nest the content of the function in an if-else statement
var buttonOnePrice = 500;
function buttonOne() {
if(income >= buttonOnePrice) {
a++;
document.getElementById("btnLabel1").innerHTML = " Units Owned : " + a;
income-=buttonOnePrice;
document.getElementById("HeaderLabel").innerHTML = "<b> OK, good, now lets
watch as your money starts to generate slowly but surely. <p> After all no
empire was built in a day. <p> When you have enough money you can buy more
units." ;
window.setInterval (function move() {
var elem = document.getElementById("myprogbar1");
var width = 1;
var id = setInterval(frame, 4);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}, 1000)
}
} else {
}
and you can handle he else statement as you want. for example you can show an alert "insufficient funds" or something like that
So I have to make a countdown of where the images show up and they slide in random directions. I have gotten the countdown to work, but the shapes do not move. I could only use Javascript, no JQuery. Here is my code so far:
https://jsfiddle.net/IyamSIM/L6umLkt8/
function countdown() {
var seconds;
var way;
seconds = document.getElementById('countdown').innerHTML;
seconds = parseInt(seconds, 10);
if (seconds == 1) {
way = document.getElementById('countdown');
way.innerHTML = "End";
ham();
sis();
wash();
return;
}
seconds--;
way = document.getElementById('countdown');
way.innerHTML = seconds;
timeoutMyStop = setTimeout(countdown, 100);
}
countdown();
function ham() {
var elem = document.getElementById("ham");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 550) {} else {
pos++;
elem.style.bottom = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function sis() {
var elem = document.getElementById("sis");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 250) {} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
function wash() {
var elem = document.getElementById("wash");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 290) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
img{
width: 100px;
height: 100px;
}
<body>
<h1>Countdown Surprise Assignment</h1>
<center><div id="countdown">10</div></center>
<img id ="ham" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/hamilton.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/sisters.jpg">
<img id ="sis" src="https://simranjits-swamped-story.neocities.org/FINAL_PROJECT/washington.jpg">
You could let CSS3 do the job for you.
Also why don't you create a random function generator? That's what you need after all, the one below will generate a number given a min and max value range.
var EL_countdown = document.getElementById('countdown'),
ELs_card = document.getElementsByClassName('card'),
sec = 10;
// random generator
function rnd(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function countdown() {
sec--;
EL_countdown.innerHTML = !sec ? "End" : sec;
if (!sec) return flyTime();
else setTimeout(countdown, 100);
}
// Assign a random transition-timing and translate(x, y) position
function flyTime() {
// assign CSS3 transition and transform to every card
for (var i = 0; i < ELs_card.length; i++) {
ELs_card[i].style.transition = rnd(1, 6) + "s";
ELs_card[i].style.transform = "translate(" + rnd(20, 250) + "px, " + rnd(30, 120) + "px)";
}
}
countdown();
<div id="countdown">-</div>
<img class="card" src="//placehold.it/50x50/0bf">
<img class="card" src="//placehold.it/50x50/f0b">
<img class="card" src="//placehold.it/50x50/fb0">
I've searched so much but I can't figure it out how to configure my bars.
I plan to put 3 loading bars that execute automatically according time:
1st will start from 30 to 60 seconds
2nd from 300 to 1800 seconds
3rd from 1801 to 1860 seconds
My Code is this ( be aware that I don't know how to change this values, I tried but don't work properly... This is the help I need, the frame stuff )
var my1Bar = setTimeout(start1Bar, 30000);
var my2Bar = setTimeout(start2Bar, 300000);
var my3Bar = setTimeout(start3Bar, 1800000);
function start1Bar() {
var elem = document.getElementById("my1Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start2Bar() {
var elem = document.getElementById("my2Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function start3Bar() {
var elem = document.getElementById("my3Bar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
Thank you all
startBar(3000,4000 ,"my1Bar");
startBar(4001,20000 ,"my2Bar");
startBar(20001,22000,"my3Bar");
function startBar(start_ms,end_ms,id){
return setTimeout(function(){
loadBar(start_ms,end_ms,id);
}, start_ms);
}
function loadBar(start_ms,end_ms,id){
var elem = document.getElementById(id);
var widthAtStart = 0;
var widthAtEnd = 100;
var timeDuration=end_ms-start_ms;
var remindWidth=widthAtEnd-widthAtStart;
var curWidth=widthAtStart;
var lastTime=Date.now();
var intervalId = setInterval(frame, 10);
function frame() {
var dt=Date.now()-lastTime;
lastTime=Date.now();
var w=remindWidth*dt/timeDuration;
if (curWidth >= widthAtEnd) {
clearInterval(intervalId);
elem.style.width = '100%';
} else {
curWidth+=w;
elem.style.width = curWidth + '%';
}
}
}
.bars>div{
position:relative;
width:100%;
height:22px;
padding:1px;
margin:2px;
background:#ccc;
}
.bars>div>div{
position:absolute;
height:20px;
width:0;
background:red
}
<div class="bars">
<div><div id="my1Bar"></div></div>
<div><div id="my2Bar"></div></div>
<div><div id="my3Bar"></div></div>
</div>
Here is a bit refactored version of your code. To run a progress bar you need to call startBar() function with the time you want it to start and end and the id of a progress bar element. For example, in the code below the first bar will start after 1 second and end after 6 seconds (running for 5 seconds in total).
I also used HTML5 progress element. It is much better than using divs as progress is semantic and you don't have to manipulate any css parameters, you just change it's value. Plus it has a bonus of looking native to the platform and browser it is rendered on. However, if you want to style it to look the same on all platforms, it can be a bit of a pain. Here is a styling guide for progress element
startBar(1, 6, "first");
startBar(3, 6, "second");
startBar(5, 8, "third");
function startBar(from, to, id) {
// Convert seconds to miliseconds
from *= 1000;
to *= 1000;
// Delay the start of the loop for 'from' seconds
setTimeout(function() {
var bar = document.getElementById(id);
var duration = to - from;
var start = Date.now();
// Start the loop
var loop = setInterval(function() {
var runningFor = Date.now() - start;
if (runningFor <= duration) {
bar.value = Math.ceil(runningFor / duration * 100);
} else {
bar.value = 100;
clearInterval(loop);
}
}, 10);
}, from);
}
progress {
width: 100%;
}
<progress id="first" value="0" max="100"></progress>
<progress id="second" value="0" max="100"></progress>
<progress id="third" value="0" max="100"></progress>
Ok I have some JS that depending on the percentage the progress bar will load and display the % inside the bar.
see working code bellow
$("#next-button").click(function() {
a.eventHub.publish("ui/nextclick")
});
UI.prototype.updatePercentile = function(a) {
if (this.isStandalone || -1 == a.percentile) $("#results-percentages")
.hide();
else {
$("#results-percentages")
.show(), $("#results-percentile-1")
.html(a.percentile), $("#results-suffix")
.html(a.suffix), $("#results-suffix-2")
.html(a.suffix), 1 === a.timesTaken ? ($("#results-timestaken")
.html(a.timesTaken + " time"), $("#results-percentile-2")
.html("100")) : ($("#results-timestaken")
.html(a.timesTaken + " times"), $("#results-percentile-2")
.html(a.percentile));
var b = 0;
$("#percentile-scale .scale-item")
.each(function() {
b += $(this)
.outerWidth()
}), $("#percentile-scale .scale-indicator").css("width", b * a.percentile / 100 + "%"),
$(".scale-marker").css("left", b * a.percentile / 100 + "%")
}
}
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= document.getElementById("results-percentile-2").innerHTML) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + '%';
}
}
}
however now i want to pull in a ne ID to add along side the percentage do it will display like 10th or 3rd depending on the score, however when i alter my JS to include the other ID (See bellow) it just shows the th, rd or st no the number.
HTML
<h3 style="text-align: left;"> You scored in the <em class="big-six"><span id="results-percentile-1"></span><span id="results-suffix-2"></span></em> percentile.
</h3>
<div class="myProgress">
<div id="myBar" style="width:0">
<div id="demo"><span id="results-suffix"></span></div>
<!--<div id="demo"></div>-->
</div>
JS
(function() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("demo").innerHTML = width * 1 + document.getElementById("results-suffix").innerHTML ;
}
}
}());
IDs MUST be unique. If you need multiple elements with the same identifier, use a class.
For example:
<div id="myBar" style="width:0">
<div class="demo"><span class="results-suffix"></span></div>
<div class="demo"></div>
</div>
And your javascript would change to:
function frame() {
if (width >= Number(document.getElementById("results-percentile-2").innerHTML)) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
var demoElems = document.getElementsByClassName('demo');
var i, innerHTML, resultsElems;
// loop through the list of elements
for(i = 0; i < demoElems.length; i++) {
resultsElems = demoElems[i].getElementsByClassName('results-suffix')
innerHTML = width * 1;
// only append the results-suffix element if it exists
if(resultsElems.length > 0) {
innerHTML += resultsElems[0].innerHTML;
}
demoElems[i].innerHTML = innerHTML;
}
}
}