Javascript help

[BiggestNizzy]

As the long night come in I am looking to teach myself HTML/CSS and JavaScript. I have a basic understanding of HTML and CSS but I am struggling with java.

I thought I would start off with a simple speed / feed calculator as I know the maths from work. I have managed to get the first bit working if I type in a surface speed and diameter it will calculate the correct rpm. I wanted to add a set of standard values and this is where I have become stuck.

I want to be able to select a material and have it enter the values into the <input> boxes and do the calculation.

HTML

Code: Select all

        <form id="form1" runat="server">
            <table>
                <div id="content" class="content">
                    <tr>
                        <td>
                            <select>
                                <option onselect="turnvalue(150,200,0.35,0.25)" >Steel</option>
                                <option onselect="turnvalue(400,500,0.35,0.25)" >Aluminium</option>
                                <option onselect="turnvalue(120,160,0.35,0.25)" >Stainless Steel</option>
                                <option onselect="turnvalue(30,35,0.35,0.25)" >Inconel</option>
                                <option onselect="turnvalue(50,60,0.35,0.25)" >Super Duplex</option>
                            </select>
                       </td>
                        <td>Material</td>
                    </tr>
                    <tr>
                        <td>Roughing</td>
                        <td>Finishing</td>
                    </tr>
                    <tr>
                        <td><input class="mati" id="vc_r" type="text" value="0" oninput="calc_n_r()" />Surface Speed</td>
                        <td><input class="mati" id="vc_f" type="text" value="0" oninput="calc_n_f()" />Surface Speed</td>
                    </tr>
                    <tr>
                        <td><input class="mati" id="Dm1" type="text" value="0" oninput="calc_n_r()" />Diameter</td>
                        <td><input class="mati" id="Dm2" type="text" value="0" oninput="calc_n_f()" />Diameter</td>
                    </tr>
                    <tr>
                        <td><input class="mati" id="n_r" type="text" value="0" oninput="calc_vc_r()" />RPM</td>
                        <td><input class="mati" id="n_f" type="text" value="0" oninput="calc_vc_f()" />RPM</td>
                    </tr>
                    <tr>
                        <td><input class="mati" id="f_r" type="text" value="0" />Feed</td>
                        <td><input class="mati" id="f_f" type="text" value="0" />Feed</td>
                    </tr>
                    
            </table>
            </form>

JavaScript

Code: Select all

//Turning
//Roughing
//Roughing calculate RPM
function calc_n_r() {
    var vc_r = document.getElementById('vc_r').value; //get value in "vc"
    var Dm1 = document.getElementById('Dm1').value; //get value in "Dm"
    var n_r = document.getElementById('n_r'); 
    var n_r_calc = Math.round((parseInt(vc_r) * 1000) / (parseInt(Dm1) * Math.PI));
    n_r.value = n_r_calc;
}
//Roughing Calculate SMM
function calc_vc_r() {
    var n_r = document.getElementById('n_r').value;
    var Dm1 = document.getElementById('Dm1').value;
    var vc_r = document.getElementById('vc_r');
    var vcr_calc = Math.round(((parseInt(n_r) * (parseInt(Dm1) * Math.PI)) / 1000));
    vc_r.value = vcr_calc;
}
//Finishing
//Finish Calulate RPM
function calc_n_f() {
    var vc_f = document.getElementById('vc_f').value; //get value in "vc"
    var Dm2 = document.getElementById('Dm2').value; //get value in "Dm"
    var n_f = document.getElementById('n_f'); 
    var n_f_calc = Math.round((parseInt(vc_f) * 1000) / (parseInt(Dm2) * Math.PI));
    n_f.value = n_f_calc;
}
//Finish Calculate SMM
function calc_vc_f() {
    var n_f = document.getElementById('n_f').value;
    var Dm1 = document.getElementById('Dm1').value;
    var vc_f = document.getElementById('vc_f');
    var vcf_calc = Math.round(((parseInt(n_f) * (parseInt(Dm1) * Math.PI)) / 1000));
    vc_f.value = vcf_calc;
}
//Standard Cutting Data
//vc_r = roughing SMM
//vc_f = finishing SMM
//f_r = roughing feed
//f_f = finishing feed
function turnvalue(vc_r, vc_f, f_r, f_f) {
    var Dm1 = document.getElementById('Dm1').value;
    var n_f = document.getElementById('n_f').value;
    var n_r = document.getElementById('n_r').value;
    var n_f_calc = Math.round((parseInt(vc_f) * 1000) / (parseInt(Dm1) * Math.PI));
    var n_r_calc = Math.round((parseInt(vc_r) * 1000) / (parseInt(Dm1) * Math.PI));
    n_r.value = n_r_calc
    n_f.value = n_f_calc;
}

[tut]

Do you really have to type that lot out?

tut

[BiggestNizzy]

At the start yes , cut and paste here.

[robin]

Niz, what doesn't work?

You've got a lot of stuff there - have you built it up in small parts and tested it along the way?

Javascript sucks. Is there a reason you really want to learn it. Don't take this the wrong way, but it is a bad language for people to learn to program in, and your programming experience to date probably won't stand you in good stead to keep you on the straight and narrow.

If you must use JavaScript I suggest you investigate TypeScript which is "the same" but you get to write code in an environment that supports you better.

BTW, your form is runat=server which (AFAIK) is a microsoft extension that makes your code run server side; but that makes no sense (to me) because you're writing code to run in a browser (JavaScript).

Cheers,
Robin

[PhilA]

Hi,

Had a wee look.
Couple of things. First, the onselect wont work across browsers (thats a whole big subject). Updated it to be onchange on the select.
Second, the function turnvalue gets n_r and n_f as values (the .value after the getElementById).
Then it later tries to update this ".value".
Change it to get the object (no .value) and then later update the .value.

See it on https://jsfiddle.net/f450wyxf/1/
Hope that helps as a starter.
Oh, and got infinity for some calcs initially as the diameter is 0 - so set it to 1 just to avoid that.

Id likely rearrange it to "initialise", and then upon each change of things, feed in the values and call a calculating function. All depends on what you like to do

[PhilA]

Javascript sucks. Is there a reason you really want to learn it. Don't take this the wrong way, but it is a bad language for people to learn to program in, and your programming experience to date probably won't stand you in good stead to keep you on the straight and narrow.

yeah, the worst bit is that JavaScript works differently in different browsers.
I learnt alot in JS playing around - creating classes etc. Can do lots, but it royally peeves u off when it doesnt work in Chrome/IE/Firefox/Safari for weird browser behaviours.

If you must use JavaScript I suggest you investigate TypeScript which is "the same" but you get to write code in an environment that supports you better.

Another option, but maybe doesnt fit the idea of "Java" is JQuery. Its a library that makes things work crossbrowser. E.g. GetElementById selector - ud use something else instead.

BTW, your form is runat=server which (AFAIK) is a microsoft extension that makes your code run server side; but that makes no sense (to me) because you're writing code to run in a browser (JavaScript).

Aye, thats ASP.NET webforms.. cough spit
If you are new to .Net Framework, seriously consider learning MVC. Its cleaner.

If you are doing JS only, then no need to worry
Id consider doing C# instead of JS. C# is fairly similar to JS in terms of syntax, tho obviously the whole Form interaction thing would need to be in ASP.NET Webforms or MVC in that case.

Welcome to my world