• 0

[Javascript] Quick conversion question

Asked by sathenzar,

 Share

Question

Mentor

sathenzar

Posted
Posted

So I'm trying to refresh myself on javascript since it's been a while since I've used it. The book I picked up is mainly showing how to do things in jquery. While I love jquery I want to do each example in javascript so I know how to do the example without jquerys help. So I'm calculating a total below it's pretty simple. I can't seem to replicate the jquery functions in just pure javascript :(


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.latent
{
display:none;
}

.buttonHover
{
font-family:Calibri;
font-size:16px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="jqueryc.1.9.1.js"></script>
<script type="text/javascript">
var priceData = { massansc: 20, idrasc: 120, lshethsc: 150 };
$(document).ready(function(e)
{
$("#buttonDiv input:submit").hide();
$("<a href='#'>Submit Order</a>")
.appendTo("#buttonDiv").addClass("button").click(function(e)
{
$('form').submit();
e.preventDefault();
}).hover(function(e)
{
var elem = $('#buttonDiv a');
if(e.type == "mouseenter")
{
elem.addClass("buttonHover");
}
else
{
elem.removeClass("buttonHover");
}
});
$('.latent').show();

$('input').bind("change keyup", function()
{
var subtotal = $(this).val() * priceData[this.name];
$(this).siblings("span").children("span").text(subtotal);
calcTotal();
oldCalcTotal();
});
});

function calcTotal()
{
var total = 0;
$('span.subtotal span').not('#total').not('#total2').each(function(index, elem)
{
total += Number($(elem).text());
});
$('#total').text("$" + total);
}

function oldCalcTotal()
{
document.getElementById("consoleTestDiv").innerHTML = '';
var total = 0;
var elems = document.getElementById("bodyContent").getElementsByTagName("span");
for(var i = 0; i < elems.length; i++)
{
//document.getElementById("consoleTestDiv").innerHTML += 'Elem: ' + elems[i].innerHTML;
var innerElems = elems.item(i).getElementsByTagName("span");
for(var i2 = 0; i2 < innerElems.length; i2++)
{
document.getElementById("consoleTestDiv").innerHTML += 'Parent Elem (id: ' + elems[i].getAttribute("id") + '): ' + elems[i].innerHTML + '[end elem]';
document.getElementById("consoleTestDiv").innerHTML += 'Elem: ' + innerElems[i2].innerHTML;
document.getElementById("consoleTestDiv").innerHTML += 'Id name: ' + elems.item(i).querySelector("span").getAttribute("id");
if(elems.item(i).getAttribute("id") != "total" && elems.item(i).getAttribute("id") != "total2")
total += innerElems[i2].innerHTML;
else
document.getElementById("consoleTestDiv").innerHTML += ' | Found not usable div';

}
}
$('#total2').text("$" + total);
}
</script>
<title>Untitled Document</title>

</head>

<body>
<div id="bodyWrapper">
<div id="hdrDiv">

    </div>
    <div id="bodyContent">
    <form action="/basket.php" method="post">
     <div class="groupContent">
         <label for="massansc" class="coachname">Massan ($20)</label>
            <input name="massansc" value="0" />
            <span class="subtotal latent" id="massans">($<span>0</span>)</span>
        </div>
        <div class="groupContent">
         <label for="idrasc" class="coachname">Idra ($120)</label>
            <input name="idrasc" value="0" />
            <span class="subtotal latent" id="idras">($<span>0</span>)</span>
        </div>
        <div class="groupContent">
         <label for="lshethsc" class="coachname">LiquidSheth ($150)</label>
            <input name="lshethsc" value="0" />
            <span class="subtotal latent" id="lsheths">($<span>0</span>)</span>
        </div>
        <div class="sumline latent"></div>
        <div class="groupContent latent">
         <label class="coachname">Total:</label>
            <input class="placeholder" name="spacer" value="0" />
            <span class="subtotal latent" id="total">$0</span>
        </div>
        <div class="groupContent latent">
         <label class="coachname">Total 2:</label>
            <input class="placeholder" name="spacer" value="0" />
            <span class="subtotal latent" id="total2">$0</span>
        </div>
        <div id="buttonDiv">
         <input type="submit" />
        </div>
    </form>
    <div id="consoleTestDiv">
    </div>
    </div>
</div>
</body>
</html>

Basically if the span id is not total or total2 I want to add up the total but it doesn't appear to be grabbing all of the spans in the first place. It's just off and I can't place my finger on why.

Derp, I figured it out after I posted this. I was forgetting the Number function :( Well hey sometimes when you stare at code for a while it's a good idea to get up and stretch for 2 minutes :)

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
 Share
Go to question listing