0

I'm taking an old VB.NET toy that I made in 2006 and trying to convert it to HTML/JavaScript/CSS3, so its functionality can be embedded in a page on Tumblr. However, I've managed to get the item 99% converted from its VB.NET form to a JavaScript form. The problem is, the item won't code.

This below is the HTML of the body of my web port:

<table id="jewelryjiddyapp"><tr>
<td colspan="2"><div id="logofield"><p id="JiddyMainLogo">Jewelry Jiddy's</p>
<p id="JiddySubLogo">Wedding Ring Store</p></div></td>
<td>
<div class="fieldlabel" style="margin-top:25px;">Model Name</div>
<form>
<select id="modelBox">
<option id="heartsinlavaflow">Hearts in Lavaflow</option>
<option id="scarofafrica">Scar of Africa</option>
<option id="monkeysuncle">Monkey's Uncle</option>
<option id="flatteringfool">Flattering Fool</option>
<option id="stealdeal">Steal Deal</option>
<option id="arweethearyet">Arwee Thearyet</option>
<option id="checkbouncer">Checkbouncer</option>
<option id="worthyoursoul">Worth-Your-Soul</option>
<option id="therough">The Rough</option>
<option id="canyudrspecial">Canyu Dr. Special</option>
<option id="viderzhen">Viderzhen</option>
<option id="fiberglasschicken">Fiberglass Chicken</option>
<option id="pinkpuma">Pink Puma</option>
</select>
</form>
<p class="limitnotice">Limit 1 Model Type per Sale</p>
</td>
</tr><tr>
<td>
<div class="fieldlabel">Number of Items</div>
<form id="noifield">
<input id="NOI-1" name="noi" type="radio" />1
<input id="NOI-2" name="noi" type="radio" />2
<input id="NOI-3" name="noi" type="radio" />3
<input id="NOI-4" name="noi" type="radio" />4
<input id="NOI-5" name="noi" type="radio" />5
</form>
<p class="limitnotice">Limit 5 per Sale</p>
</td>
<td>
<div class="fieldlabel">Sales Code</div>
<form>
<select id="saleBox">
<option id="normalsale">Normal</option>
<option id="the25off">25% Off Sale</option>
<option id="the40off">40% Off Sale</option>
<option id="the15off">15% Senior Discount</option>
</select>
</form>
<form style="text-align:center;">
<input class="fieldlabel" id="findSalesTotal" type="button" value="Find Sales Total" 
onclick="findSalesTotal(); return true;" />
</form>
</td>
<td>
<div class="fieldlabel">Total Amount Due</div>
<p id="finalSalesTotal"></p>
</td>
</tr></table>

Here's the JavaScript:

<script language="javascript" type="text/javascript">
function findSalesTotal() {
var itemValue;
var NOI;
var itemTotal;
var SalesCode;
var DueSansTax;
var SalesTax = 1.06;
var TAD;
if (document.getElementById('heartsinlavaflow').selected = true)
{itemValue = 190;}
else if (document.getElementById('scarofafrica').selected = true)
{itemValue = 220;}
else if (document.getElementById('monkeysuncle').selected = true)
{itemValue = 321.15;}
else if (document.getElementById('flatteringfool').selected = true)
{itemValue = 118.65;}
else if (document.getElementById('stealdeal').selected = true)
{itemValue = 5.75;}
else if (document.getElementById('arweethearyet').selected = true)
{itemValue = 88.73;}
else if (document.getElementById('checkbouncer').selected = true)
{itemValue = 532.9;}
else if (document.getElementById('worthyoursoul').selected = true)
{itemValue = 6685.19;}
else if (document.getElementById('therough').selected = true)
{itemValue = 12.18;}
else if (document.getElementById('canyudrspecial').selected = true)
{itemValue = 86.14;}
else if (document.getElementById('viderzhen').selected = true)
{itemValue = 121.15;}
else if (document.getElementById('fiberglasschicken').selected = true)
{itemValue = 132.17;}
else if (document.getElementById('pinkpuma').selected = true)
{itemValue = 93;}
else
{itemValue = 0; 
alert("Select a valid model, Model Select Error");}
if (document.getElementById('NOI-1').checked = true)
{NOI = 1;}
else if (document.getElementById('NOI-2').checked = true)
{NOI = 2;}
else if (document.getElementById('NOI-3').checked = true)
{NOI = 3;}
else if (document.getElementById('NOI-4').checked = true)
{NOI = 4;}
else if (document.getElementById('NOI-5').checked = true)
{NOI = 5;}
else
{NOI = 0; alert("Select a number of items. Number of Items Error");}
if (document.getElementById('normalsale').selected = true)
{SalesCode = 1;}
else if (document.getElementById('the25off').selected = true)
{SalesCode = 0.75;}
else if (document.getElementById('the40off').selected = true)
{SalesCode = 0.6;}
else if (document.getElementById('the15off').selected = true)
{SalesCode = 0.85;}
else
{SalesCode = 0; alert("Invalid Entry, Sales Code Error");}
itemTotal = itemValue * NOI;
DueSansTax = itemTotal * SalesCode;
TAD = DueSansTax * SalesTax
document.getElementById('finalSalesTotal').innerHTML = TAD;}
</script>

I'm no JavaScript expert, but the script looks well-formed to me. So I can't quite understand why it is that it won't execute at all. When everything works right, the Total Amount Due field will display a numeric value, which I can then parse as money once I know I get a readout. But so far, I don't get any results. Does anyone have any suggestions to turn this thing around?

Originally, this was part of a class assignment a decade ago. I compiled it in VB.NET back then, with everything working fine. I've removed the game-like "cheat" codes that gave funny results, since I want to get a basic script to work before making it cute.

And no, I don't remember exactly how I did it in VB.NET. I haven't been doing that level of program compilation since 2007.

UPDATE: Thank you for the "window." advice. But now there's a new problem: it doesn't remember selections. For example: When I set it to "Scar of Africa," it reverts to "Hearts in Lavaflow." When I set the radio buttons to two, they reset to 1. When I select a sale, I get redirected to the Normal mode. How do I get data choices retained before output?

PS: I've removed the CSS, as some were saying it was getting in the way and is not part of the problem anyway.

IvanRider
  • 21
  • 2
  • Are you getting a specific error? Also, this is a lot of code to wade through - can you narrow the problem down? – sherb Oct 15 '14 at 00:22
  • Try changing `onclick="findSalesTotal(); return true;"` to `onclick="window.findSalesTotal(); return true;"`. – Stryner Oct 15 '14 at 01:43

2 Answers2

1

Your problem is that your button's id is findSalesTotal and your function's name is findSalesTotal.

Here is a jsfiddle of the one that doesn't work: http://jsfiddle.net/gzej4jm5/1/ This one does work: http://jsfiddle.net/gzej4jm5/2/

The browser or javascript engine thinks that you are trying to reference the DOM element (your button) in your onclick event.

Either change your button's id, or change the name of the function and update the button's onclick event. I did the latter in the working fiddle, changing the function name to findSalesTotalFunction.

Relevant HTML:

<input class="fieldlabel" id="findSalesTotal" type="button" 
value="Find Sales Total" onclick="findSalesTotalFunction(); return true;" />

Relevant javascript:

function findSalesTotalFunction()
ps2goat
  • 8,067
  • 1
  • 35
  • 68
  • Unfortunately, ps2goat, when I hit "5" on the radio buttons, it still only does the calculations for 1, and defaults the model, and defaults the sales mode. It shouldn't default. It should remember my selections. – IvanRider Oct 15 '14 at 04:51
  • Maybe so, but your main issue was that javascript errors were occurring, causing your method to not even be called. – ps2goat Oct 15 '14 at 05:42
0

It turns out that the biggest reason for the form's being confused was that the "= true" part wasn't necessary. It was redundant logic. By removing that, I got the form to work. I even added the little tweak I found here:

How to print a number with commas as thousands separators in JavaScript

That way, there are commas. Since I couldn't get the Sales Code box to accept random strings, the "cheat codes" in the VB.NET version didn't get ported. But this will work plenty well as a sample item on the Dozerfleet Labs Widgets catalog for a web widget port. Those who want the silly cheats will just have to download the VB.NET version, which will be provided. Thanks for the assistance, everyone.

Community
  • 1
  • 1
IvanRider
  • 21
  • 2