Looking for help with the Switch Loop


#1

I’m new to JavaScript, gone through the online tutorials in both the written and video format. Learned a lot along the way and have put some code together using a little of what I learn from examples and instinct.

I’ve taken this and created a jsfiddle for my code which can be found here:
https://jsfiddle.net/ttsprez/j9kdaf2q/

I was inspired to use the Switch Loop and created the code with the help of this tutorial:
https://www.tutorialspoint.com/javascript/javascript_switch_case.htm

I’d like to have the customer see results in the following format:

Example of Bonded Title Service:

You chose the service of : Service Name
Your Service Fee is $0.00
Your Bond Value is $0.00
Your Bonding Fee is $0.00
Your Bonding Overage Fee is $0.00
Your Tax, Title and Licensing Fee is $0.00
The total estimated cost of your service is $0.00

In the console, it currently shows the actual view I’d like to present to customers for inputting vehicle value and selecting their service. When they’ve done so, I’d like to have the results, as shown in the example above, presented in the <div id="results">&nbsp;</div> area as laid out in the html so it shows up just under the input area.

So, of course, the “Switch” is meant to test cases against each service_prices name and then output the estimate statements for each service. My issue is that when I use this “var service = service_prices” on line 52 of the js code the console gives a black background and outputs the default case message of the switch, thus totally bypassing the needed input area created by html.

Let me warn you, all this is something I’m learning, so I KNOW it is far from perfect, but I’ve attempted to get it to a point where I could show my intention and get someone to point me in the right directions. Any and all help is deeply appreciated.


#2

You’re mixing your metaphors a bit, which is causing you a lot of grief.

  • You can’t call a switch on the onchange event - it has to go to a function/method
  • The basic switch call was messed up overall.
    • The switch needed to be on a variable (or could be to the value)
    • you use either document.write OR innerHTML. You shouldn’t use both. document.write is to provide brand new content where none exists, innerHTML is to replace content. innerHTML would be appropriate here.
    • your opening/closing of your strings was incomplete.
  • the var results was conflicting with the div with the id of results - this one took me a minute to find once I cleaned up the switch as it wasn’t erroring out, just not doing anything.

I created a new method for you which should do what you want. You just need to add a call to this on your onchange event

(note: jsFiddle seems to require an event listener, so this works in your js after the method declaration instead of the onchange in the html: document.getElementById(‘service’).onchange = getPrice;)

function getPrice() {
  var mechfee = 25.00
  var salfee = 65.00
  var newresfee = 90.00
  var rejectltr = 15.00
  var dupfee = 5.45

  switch (service.value) {
    case 'Vehicle Information':
      results.innerHTML = "The total estimated cost of your service is $" + getServicePrice() + "<br />";
      break;
    case 'Duplicate Title':
      results.innerHTML = "The cost of your service is $" + getServicePrice() + "<br />" +
        "The court cost for your service is $" + dupfee + "<br />" +
        "The estimated total cost of your service is $" + (dupfee + getServicePrice()) + "<br />";
      break;
    case 'Title Transfer':
      results.innerHTML = "The cost of your service is $" + getServicePrice() + "<br />" +
        "Your Tax, Title and License fees are $" + getTTL_Value() + "<br />" +
        "The estimated total cost of your service is $" + (getServicePrice() + getTTL_Value()) + "<br />" +
      "If you are dealing with an Out of State Title, you could be accessed an additional fee of $" + newresfee;
      break;
    case 'Bonded Title':
      results.innerHTML = "The cost of your service is $" + getServicePrice() + "<br />" +
        "Your Vehicle Bond Value is $" + getBond_Value() + "<br />" +
        "Your Bond Overage fee is $" + getBondOverage_Value() + "<br />" +
        "Your Tax, Title and License fees are $" + getTTL_Value() + "<br />" +
        "The estimated total cost of your service is $" + (getServicePrice() + getBond_Value() + getBondOverage_Value() + getTTL_Value()) + "<br />" +
        "If you are dealing with an Out of State Title, you could be accessed an additional fee of $" + newresfee;
      break;
    case 'Salvage Title':
      results.innerHTML = "The cost of your service is $" + getServicePrice() + "<br />" +
        "Your Tax, Title and License fees are $"+getTTL_Value() + "<br />" +
      "There is a Salvage Title processing fee of $" + salfee + "<br />" +
        "The estimated total cost of your service is $" + (getServicePrice() + getTTL_Value() + salfee) + "<br />" +
        "If you are dealing with an Out of State Title, you could be accessed an additional fee of $" + newresfee;
      break;
    case 'Mechanic Lien':
      results.innerHTML = "The cost of your service is $" + getServicePrice() + "<br />" +
        "Your Tax, Title and License fees are $" + getTTL_Value() + "<br />" +
        "There is a Mechanics Lien processing fee of $" + mechfee + "<br />" +
        "The estimated total cost of your service is $" + (getServicePrice() + getTTL_Value() + mechfee) + "<br />" +
        "If you are dealing with an Out of State Title, you could be accessed an additional fee of $" + newresfee;
      break;
    default:
      results.innerHTML = "Please pick a service<br />";
  }
  results.innerHTML += "<p>Please remember this is only and estimate and final cost will be determined by your local state and county agencies.  Also, please be aware that you will be accessed a $25 late fee for every month you have failed to properly transfer title after the first 30 days of the sale up to the amount of $250. In addition, you will be accessed a 10% late fee penalty on the Tax amount.</p>";
}

#3

First, let me say thanks for the help, I can see where my efforts were lacking now. But clearly understand everything you’ve given thus far except for the following:

little confused by this… So to clarify, your saying that this piece of code is needed in jsFiddle somewhere in order for it to work there, but I don’t need it for the actual live file, is that correct? And If so, I’m placing it where and how in the html or js on jsFiddle exactly.

Your note says, " after the method declaration instead of the onchange in the html". So my question is, am I replacing the “onchane = getPrice;” for “document.getElementById(‘service’).onchange = getPrice;” in the html. Or is it that I need to put this into the js somewhere. Pardon my newness to this, but I have a strong assumption that it goes into the js as it looks more like js than html to me. And if that is the case, please point me to where exactly, that would be appreciated.


#4

I forgot to add you to my last post but here is the link…


#5

For me, this line of code wasn’t working in jsFiddle. The method was never firing. I could put an alert in there and see it, so the onchange was firing, but the method never got reached.

<select id="service" name="service" onchange="getPrice()">

So what I did instead was remove it from the html and added an event listener (or what I call a listener, it’s not technically) after the method definition in the js instead

<select id="service" name="service">
function getPrice() {
    // snipped code since it's not needed for this purpose....
}
document.getElementById(‘service’).onchange = getPrice;

Now, this not only works in jsfiddle, but in vanilla javascript as well, and it has the added benefit of lowered amount of markup for the browser to parse, and cleaner delineation of purpose (markup for basic display, js for actions)


#6

I have this line of code in the page head

&lt;script type="text/javascript" src="[/formcalculations.js](http://losttitleconnection.net/formcalculations.js)"&gt;&lt;/script&gt;

I have this in the of the live html file:

<form action="formcalculations.js" id="estimateform" onsubmit="return false;">

and made the changes in the html to remove the onchange=getPrice() and then added the “document.getElementById(‘service’).onchange = getPrice;” to the end of the js in the live file, yet it is not outputting results.

Here is a link to the live page on my site:
http://losttitleconnection.net/estimate

just so you understand everything, the html page is in public_html/losttitleconnection/livesite folder and the js is in public_html/losttitleconnection folder of my server directory. Don’t think there should be any problem with that as the test code I was using previously had been working.

Is there something I’m missing or would this work easier or better with a submit button?

ps… it isn’t working in jsFiddle either for me, so I must have something wrong on my end if it’s working for you. Updated jsFiddle: https://jsfiddle.net/ttsprez/j9kdaf2q/148/


#7

You have

document.getElementById(service).onchange = getPrice;

which needs to be (note the quotes)

document.getElementById("service").onchange = getPrice;

you could probably get away with this, but I personally prefer the first version…

service.onchange = getPrice;

#8

Succes! Got it working in Fiddle and made changes to my live files. I usually have to give the sever time to readjust. I’ll let you know how it goes, but thanks for pointing me in the right directions. If it works live like it is in Fiddle that would be great.


#9

@DaveMaxwell,
Thank you so much…
I really appreciate all your help with getting this straight… I put this code together a while ago and was on another forum looking for help. Got told that jsFiddle had lots of red and yellow dots and that I need to clear them up before they’d give help with working out the logic. No instruction, no advice, not even “here, like this”. And this from a forum category that was labeled JS Beginners.

It discouraged me a bit because I’ve only been working with js for the last 4 weeks reading and watching tutorials, putting things together with examples and trying to solve the issues as they pop up. Decided to search for another forum, then low and behold you fell into my path. So, needless to say, I am very grateful.


#10

Glad I could help.

I know what that other forum was trying to do, but they went about it the wrong way IMHO. They were trying to teach you some basic debugging skills, but unless they gave you a hint on what to look for (that the yellow dots were warnings and the red were errors, and that hovering over the dots gave you a hint on what to look for), that wasn’t as much help as they intended.

Sometimes people forget that everyone learns at a different pace, or even that everyone was a newbie once.


#11

So true. got the feeling this person carried the opinion that his knowledge of the subject was so superior that to help much was beneath him. If your gonna be that way, why even be a admin or moderater on a beginners category.

Well all I can say is, may Karma bless you with great fortune in all your endeavours. Thank you Sir.