Custom javascript calculator using AMP in Blogger?

[surya999rai]

I recently changed my blogger template to use AMP version and getting errors while implementing existing custom calculator on my blog. below is the html and javascript code. I tried google and chatgpt but still not working. Can anybody help? here I have used the followings:

HTML Code:

<form autocomplete="off">
  <label>Inductor Formula:</label>
  <select id="inductorSelectId">
    <option selected="" value="Christopher">Formula 1</option>
    <option value="introToRFDesign">Formula 2</option>
    <option value="ARRL">Formula 3</option>
  </select>
  <br />
  <b>Calculate N</b>: <br />
  <label>
    <b>L</b>: </label>
  <input id="L1Id" size="5" type="text" />
  <select id="L1sel">
    <option value="mH">mH</option>
    <option selected="" value="uH">µH</option>
    <option value="nH">nH</option>
  </select>
  <br />
  <label>
    <b>l</b>: </label>
  <input id="l1Id" size="5" type="text" />cm <br />
  <label>
    <b>r</b>: </label>
  <input id="r1Id" size="5" type="text" />cm <br />
  <input type="reset" value="Reset" />
  <input onclick="AirCoreInductorNCalc()" type="button" value="Calculate" />
  <br />
  <b>Result:</b>
  <br />
  <label>
    <b>N</b>: </label>
  <input id="N1Ans" readonly="" size="5" type="text" />
  <label>
    <b>D</b>: </label>
  <input id="D1Ans" readonly="" size="5" type="text" />cm <br />
  <br />
  <b>Calculate L</b>: <br />
  <label>
    <b>l</b>: </label>
  <input id="l2Id" size="5" type="text" />cm <br />
  <label>
    <b>r</b>: </label>
  <input id="r2Id" size="5" type="text" />cm <br />
  <label>
    <b>N</b>: </label>
  <input id="NId" size="5" type="text" />
  <br />
  <input type="reset" value="Reset" />
  <input onclick="AirCoreInductorLCalc()" type="button" value="Calculate" />
  <br />
  <b>Result:</b>
  <br />
  <label>
    <b>L</b>: </label>
  <input id="LAns" readonly="" size="5" type="text" />µH <label>
    <b>D</b>: </label>
  <input id="D2Ans" readonly="" size="5" type="text" />mm <br />
</form>

Javascript:

function AirCoreInductorNCalc() {
    var inductorsel = document.getElementById('inductorSelectId').value;
    var L1val = parseFloat(document.getElementById('L1Id').value);
    var L1sel = document.getElementById('L1sel').value;
    var l1 = parseFloat(document.getElementById('l1Id').value);
    var r1 = parseFloat(document.getElementById('r1Id').value);

    var L, num, dem, x, N1, D1, d1;

    switch(L1sel) {
        case 'mH':
            L = L1val * 1e-6;
            break;

        case 'uH':
            L = L1val;
            break;

        case 'nH':
            L = L1val * 1e-3;
            break;

        default:
            return;
    }

    switch(inductorsel) {
        case 'Christopher':

            num = 29 * L;
            dem = 0.394 * r1;
            x = num / dem;
            N1 = Math.sqrt(x);
            document.getElementById("N1Ans").value = N1.toFixed(2);
            D1 = 2 * r1; //diameter in cm
            document.getElementById("D1Ans").value = D1.toFixed(2);
            break;

        case 'introToRFDesign':
            d1 = 2 * r1 * 1e-2; //diameter in meter
            l1 = l1 * 1e-2; //length in meter
            num = (0.45 * d1 + l1) * L1;
            dem = Math.pow(d1, 2);
            x = num / dem;
            N1 = Math.sqrt(x);
            document.getElementById("N1Ans").value = N1.toFixed(2);
            D1 = (l1 * 1e3) / N1; //diameter in mm
            document.getElementById("D1Ans").value = D1.toFixed(2);
            break;

        case 'ARRL':
            d1 = 2 * (r1 / 2.54); //convert radius cm to diameter inch
            l1 = l1 / 2.54; //convert cm to inch
            num = (18 * d1 + 40 * l1) * L1;
            dem = d1;
            x = num / dem;
            N1 = Math.sqrt(num) / dem;
            document.getElementById("N1Ans").value = N1.toFixed(2);
            D1 = (l1 * 2.54 * 10) / N1; //convert length in inch to mm
            document.getElementById("D1Ans").value = D1.toFixed(2);

        default:
            return;
    }

}

[m_hutley]

and what errors are you getting?

[surya999rai]

i have getting following errors(google chrome AMP extension):

The parent tag of tag ‘style amp-custom’ is ‘div’, but it can only be ‘head’. Debug. Learn more.

The parent tag of tag ‘amphtml engine script’ is ‘div’, but it can only be ‘head’. Debug. Learn more.

The mandatory attribute ‘action’ is missing in tag ‘form’. Debug. Learn more.

The mandatory attribute ‘target’ is missing in tag ‘form’. Debug. Learn more.

The attribute ‘onclick’ may not appear in tag ‘input’. Debug. Learn more.

The attribute ‘onclick’ may not appear in tag ‘input’. Debug. Learn more.

The extension ‘amp-script’ was found on this page, but is unused. Please remove this extension.

i have used amp-script in the template file in the section:

[m_hutley]

Okay well:

@surya999rai

The parent tag of tag ‘style amp-custom’ is ‘div’, but it can only be ‘head’.

It wants your style amp-custom tag to be in the head, not a div.

@surya999rai

The parent tag of tag ‘amphtml engine script’ is ‘div’, but it can only be ‘head’.

(Repeat previous)

@surya999rai

The mandatory attribute ‘action’ is missing in tag ‘form’.

@surya999rai

your form doesnt have an action.

@surya999rai

The mandatory attribute ‘target’ is missing in tag ‘form’.

(Repeat previous)

@surya999rai

The attribute ‘onclick’ may not appear in tag ‘input’.

Not sure why this would be the case, an input tag can definitely take an onclick attribute. I suppose it wants you to bind the event with javascript ( document.getElementById(someid).addEventListener(...) ) rather than an HTML attribute.

[rpg_digital]

I haven’t looked at the JS portion of this. I could well be wrong, but isn’t this two forms? Or is N linked to L in the calculations?

Personally I find your html difficult to read, and would want to use groups and CSS for styling rather than <b> and <br> scattered everywhere.

Something a bit more like this perhaps? Not saying the following is perfect.

<form id="form-name" action="" autocomplete="off">
    <h2>Formula Calculation 1</h2>
    <div class="form-group">
        <label for="inductorSelectId">Inductor Formula:</label>
        <select id="inductorSelectId">
            <option selected="" value="Christopher">Formula 1</option>
            <option value="introToRFDesign">Formula 2</option>
            <option value="ARRL">Formula 3</option>
        </select>
    </div>
    <fieldset>
        <legend>Calculate N</legend>
        <div class="form-group">
            <label for="L1Id">L:</label>
            <input id="L1Id" size="5" type="text" />
            <select id="L1sel">
                <option value="mH">mH</option>
                <option selected="" value="uH">µH</option>
                <option value="nH">nH</option>
            </select>
        </div>
        <div class="form-group">
            <label for="l1Id">l:</label>
            <input id="l1Id" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
        <div class="form-group">
            <label for="r1Id">r:</label>
            <input id="r1Id" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
    </fieldset>
    <div class="form-group form-buttons">
        <input type="reset" value="Reset" />
        <input id="AirCoreInductorN" type="button" value="Calculate" />
    </div>
    <fieldset class="form-results">
        <legend>Result:</legend>
        <div class="form-group">
            <label for="N1Ans">N:</label>
            <input id="N1Ans" readonly="true" size="5" type="text" />
            <label for="D1Ans">D:</label>
            <input id="D1Ans" readonly="true" size="5" type="text" />
            <span class="measurement">cm</span>
        </div>
    </fieldset>
</form>

[surya999rai]

@rpg_digital

            <option value="ARRL">Formula 3</option>

sorry I accidently posted two forms, only the L value calculation is required and the the javascript is only for L calculation. or there is another calculator for N which is below. So i have two calculation N and L inside the same form and have two javascript function. For L it is provided above. The function for calculating N is below.

    //Air Core Inductor L calculator
   function AirCoreInductorLCalc(){
                            
     var l2 = parseFloat(document.getElementById('l2Id').value);
     var r2 = parseFloat(document.getElementById('r2Id').value);
     var N2 = parseFloat(document.getElementById('NId').value);
     
     var num1 = 0.394*Math.pow(r2,2)*Math.pow(N2,2);
     var dem1 = 9*r2+10*l2;
     var L = num1/dem1;
     
     document.getElementById("LAns").value = L.toFixed(2);
 
     var D2 = l2/N2;

        document.getElementById("D2Ans").value = D2.toFixed(2);
       
       }