Не работает JS, на сайте ничего не меняется

Question

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--metatextblock--><title>Blank page</title>
<meta property="og:url" content="https://alcan.com.ua/calctesting">
<meta property="og:title" content="Blank page">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<link rel="canonical" href="https://alcan.com.ua/calctesting">
<!--/metatextblock--><meta property="fb:app_id" content="257953674358265"><meta name="format-detection" content="telephone=no">
<meta http-equiv="x-dns-prefetch-control" content="on">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<style>
    
    #quantitypc {
  width: 80px;
    margin: 6px
}

#quantityserver {
  width: 80px;
    margin: 6px
}

#pricepc,#priceserver,#total {
  width: 100px;
    margin: 2px;
  height: 20px;
}
</style>

<script type="text/javascript">window.dataLayer = window.dataLayer || [];</script><!-- Google Tag Manager --><script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);  })(window,document,'script','dataLayer','UA-205546860-1');</script><!-- End Google Tag Manager --><!-- Facebook Pixel Code -->
<script type="text/javascript" data-tilda-cookie-type="advertising">setTimeout(function(){!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.agent='pltilda';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1126918148063585');
fbq('track', 'PageView');
}, 2000);</script><!-- End Facebook Pixel Code --><script type="text/javascript">if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false && typeof(sessionStorage)!='undefined' && sessionStorage.getItem('visited')!=='y'){  var style=document.createElement('style');  style.type='text/css';  style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';  document.getElementsByTagName('head')[0].appendChild(style);    $(document).ready(function() {  $('.t-records').addClass('t-records_animated'); setTimeout(function(){ $('.t-records').addClass('t-records_visible'); sessionStorage.setItem('visited','y');    },400); });
}</script>

<style type="text/css">@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}
</style>
</head>

<body class="t-body" style="margin: 0px;"><!--allrecords--><div id="allrecords" class="t-records t-records_animated t-records_visible" data-hook="blocks-collection-content-node" data-tilda-project-id="3573367" data-tilda-page-id="25826268" data-tilda-page-alias="calctesting" data-tilda-formskey="3ede9b43cba36ea958432e4a4a530d4e" data-tilda-lazy="yes" data-tilda-project-headcode="yes"><div id="rec417158614" class="r t-rec r_showed r_anim" style=" " data-record-type="396"><!-- T396 --><style>#rec417158614 .t396__artboard{height: 332px;background-color: #f2f2f2;}#rec417158614 .t396__filter{height: 332px;}#rec417158614 .t396__carrier{height: 332px;background-position: center center;background-attachment: scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width: 1199px){#rec417158614 .t396__artboard{}#rec417158614 .t396__filter{}#rec417158614 .t396__carrier{background-attachment:scroll;}}@media screen and (max-width: 959px){#rec417158614 .t396__artboard{height: 462px;}#rec417158614 .t396__filter{height: 462px;}#rec417158614 .t396__carrier{height: 462px;}}@media screen and (max-width: 639px){#rec417158614 .t396__artboard{height: 432px;}#rec417158614 .t396__filter{height: 432px;}#rec417158614 .t396__carrier{height: 432px;}}@media screen and (max-width: 479px){#rec417158614 .t396__artboard{height: 752px;}#rec417158614 .t396__filter{height: 752px;}#rec417158614 .t396__carrier{height: 752px;}}#rec417158614 .tn-elem[data-elem-id="1645373802018"]{color:#000000;z-index:22;top: 20px;left: calc(50% - 600px + 411px);width:379px;}#rec417158614 .tn-elem[data-elem-id="1645373802018"] .tn-atom{color:#000000;font-size:25px;font-family:'Roboto',Arial,sans-serif;line-height:1.55;font-weight:600;background-position:center center;border-color:transparent;border-style:solid;}@media screen and (max-width: 1199px){#rec417158614 .tn-elem[data-elem-id="1645373802018"]{top: 24px;left: calc(50% - 480px + 291px);}}@media screen and (max-width: 959px){#rec417158614 .tn-elem[data-elem-id="1645373802018"]{top: 17px;left: calc(50% - 320px + 131px);}}@media screen and (max-width: 639px){#rec417158614 .tn-elem[data-elem-id="1645373802018"]{top: 12px;left: calc(50% - 240px + 74px);width:332px;}#rec417158614 .tn-elem[data-elem-id="1645373802018"] .tn-atom{font-size:22px;}}@media screen and (max-width: 479px){#rec417158614 .tn-elem[data-elem-id="1645373802018"]{top: 25px;left: calc(50% - 160px + 26px);width:268px;}#rec417158614 .tn-elem[data-elem-id="1645373802018"]{text-align:center;}#rec417158614 .tn-elem[data-elem-id="1645373802018"] .tn-atom{line-height:1.15;}}#rec417158614 .tn-elem[data-elem-id="1645470244821"]{z-index:29;top: 97px;left: calc(50% - 600px + 321px);width:560px;height:170px;}#rec417158614 .tn-elem[data-elem-id="1645470244821"] .tn-atom{background-position:center center;border-color:transparent;border-style:solid;}@media screen and (max-width: 1199px){}@media screen and (max-width: 959px){}@media screen and (max-width: 639px){}@media screen and (max-width: 479px){}</style> <div class="t396"><div class="t396__artboard rendered" data-artboard-recid="417158614" data-artboard-height="332" data-artboard-height-res-640="462" data-artboard-height-res-480="432" data-artboard-height-res-320="752" data-artboard-height_vh="" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-ovrflw="" data-artboard-proxy-min-offset-top="0" data-artboard-proxy-min-height="752" data-artboard-proxy-max-height="752"> <div class="t396__carrier" data-artboard-recid="417158614"></div> <div class="t396__filter" data-artboard-recid="417158614"></div> <div class="t396__elem tn-elem tn-elem__4171586141645373802018" data-elem-id="1645373802018" data-elem-type="text" data-field-top-value="20" data-field-top-res-960-value="24" data-field-top-res-640-value="17" data-field-top-res-480-value="12" data-field-top-res-320-value="25" data-field-left-value="411" data-field-left-res-960-value="291" data-field-left-res-640-value="131" data-field-left-res-480-value="74" data-field-left-res-320-value="26" data-field-width-value="379" data-field-width-res-480-value="332" data-field-width-res-320-value="268" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-fields="top,left,width,container,axisx,axisy,widthunits,leftunits,topunits" style="top: 25px; left: 67.5px; width: 268px;"> <div class="tn-atom" field="tn_text_1645373802018">Calculate shipping and total cost</div> </div> <div class="t396__elem tn-elem tn-elem__4171586141645470244821" data-elem-id="1645470244821" data-elem-type="html" data-field-top-value="97" data-field-left-value="321" data-field-height-value="170" data-field-width-value="560" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-fields="width,height,top,left,container,axisx,axisy,widthunits,heightunits,leftunits,topunits" style="width: 560px; left: 362.5px; top: 97px; height: 170px;"> <div class="tn-atom tn-atom__html"> 

<label for="quantity">Вес товара: </label>
<input name="quantitypc" id="quantitypc">
<br>
<label for="price">Сумма доставки: </label>
<input name="pricepc" disabled="disabled" id="pricepc" value="К примеру 3,8$ ">
<br>
<br>
<label for="quantity">Цена товара </label>
<input name="quantityserver" id="quantityserver">
<br>
<label for="price">За превышение </label>
<input name="priceserver" disabled="disabled" id="priceserver" value="50">
<br>
<br>
<label for="total">Общая сумма к оплате: </label>
<input name="total" id="total"> 

<script>
(function() { function compute() { 

//variables for number pc versus price 

var a = $('#quantitypc').val(); 
var c = $('#quantityserver').val(); 

var b = 0.0; 
var d = 0.0; 

// Calculate price for number of pc selection 

if(a <= 0.25) { 
b = 3.8; 
} 
else if (a > 0.25 && a <= 0.5) { 
b = 5.8 
} 
else if (a > 0.5 && a <= 0.75) { 
b = 7.5; 
} 
else if (a > 0.75 && a <= 1) { 
b = 8.5; 
} 
else { 
b = 8 * a; 
} 

// Calculate price for number of server selection 

if(c <= 100) { d = 0; } else if (c > 100 && c <= 150) 
{
 d = (c-100) * 0.2; 
} 
else { 
d = (c-100) * 0.2 + (c - 150) * 0.1; 
}

let ca = Number(c);
let ba = Number(b);
let da = Number(d); 

var f = ca + ba + da; // Grand Total 

$('#pricepc').val(b); // Update PC Price 
$('#priceserver').val(d); // Update Server Price 
$('#total').val(f); // Update Total 
} 

$('#pricepc,#priceserver,#quantitypc,#quantityserver').on('change', compute);
})(); 

</script>  

</div> 
</div> 
</div> </div> 

<script>
$( document ).ready(function() { t396_init('417158614');
});
</script>
<!-- /T396 --></div>
</div>
<!--/allrecords-->
<!-- Stat -->
<script type="text/javascript">
if (! window.mainTracker) { window.mainTracker = 'tilda'; } window.tildastatscroll='yes';   setTimeout(function(){  (function (d, w, k, o, g) { var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);}; s.type = "text/javascript"; 
s.async = true; 
s.key = k; 
s.id = "tildastatscript"; 
s.src=g; 

if (w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded", f, false);} else { f(); } })(document, window, '63c146adaee80c806928303e07d767a8','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');  }, 2000);</script><!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=UA-205546860-1" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) --><!-- FB Pixel code (noscript) --><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1126918148063585&ev=PageView&agent=pltilda&noscript=1"/></noscript><!-- End FB Pixel code (noscript) --><div class="t-zoomer__wrapper"><div class="t-zoomer__container"></div><div class="t-zoomer__bg"></div><div class="t-zoomer__close" style="display:none;"><svg width="20" height="20" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.41421 -0.000151038L0 1.41406L21.2132 22.6273L22.6274 21.2131L1.41421 -0.000151038Z" fill="black"></path><path d="M22.6291 1.41421L21.2148 0L0.00164068 21.2132L1.41585 22.6274L22.6291 1.41421Z" fill="black"></path></svg></div><div class="t-zoomer__scale showed" style="display:none;"><svg class="icon-increase" width="20" height="20" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.832 22L17.8592 17.0273" stroke="black" stroke-width="2" stroke-linecap="square"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.58591 3.7511C0.917768 7.41924 0.917768 13.367 4.58591 17.0352C8.25405 20.7033 14.2019 20.7033 17.87 17.0352C21.5381 13.367 21.5381 7.41924 17.87 3.7511C14.2019 0.0829653 8.25405 0.0829653 4.58591 3.7511Z" stroke="black" stroke-width="2"></path><path d="M6.25781 10.3931H16.2035" stroke="black" stroke-width="2"></path><path d="M11.2305 15.3662V5.42053" stroke="black" stroke-width="2"></path></svg><svg class="icon-decrease" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.9961 22L17.0233 17.0273" stroke="black" stroke-width="2" stroke-linecap="square"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3.74997 3.7511C0.0818308 7.41924 0.0818308 13.367 3.74997 17.0352C7.41811 20.7033 13.3659 20.7033 17.0341 17.0352C20.7022 13.367 20.7022 7.41924 17.0341 3.7511C13.3659 0.0829653 7.41811 0.0829653 3.74997 3.7511Z" stroke="black" stroke-width="2"></path><path d="M5.41797 10.3931H15.3637" stroke="black" stroke-width="2"></path></svg></div></div></body>

Answer 1

если подключить скрипт после разметки и добавить линк на jquery, то всё работает:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<title>Blank page</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#quantitypc {
  width: 80px;
    margin: 6px
}

#quantityserver {
  width: 80px;
    margin: 6px
}

#pricepc,#priceserver,#total {
  width: 100px;
    margin: 2px;
  height: 20px;
}
</style>
</head>
<body>
<div>
    <label for=quantity> Вес товара: </label>
    <input name="quantitypc" id="quantitypc" /> 
    <br />
    <label  for=price> Сумма доставки: </label>
    <input name="pricepc" disabled="disabled" id="pricepc" value="К примеру 3,8$ " />
    <br />
    <br />

    <label for=quantity>Цена товара </label>
    <input name="quantityserver" id="quantityserver" />
    <br />
    <label for=price>За превышение </label>
    <input name="priceserver" disabled="disabled" id="priceserver" value="50" />
    <br />
    <br />
    <label for=total>Общая сумма к оплате: </label><input name="total" id="total" />
</div>

<script>
(function() {
      function compute() {
        //variables for number pc versus price
        var a = $('#quantitypc').val();
        var c = $('#quantityserver').val();
        var b = 0.0;
        var d = 0.0;
        // Calculate price for number of pc selection
        if(a <= 0.25) {
            b = 3.8;
        }
        else if (a > 0.25 && a <= 0.5) {
            b = 5.8
        }
        else if (a > 0.5 && a <= 0.75) {
            b = 7.5;
        }
        else if (a > 0.75 && a <= 1) {
            b = 8.5;
        }
        else 
        {
            b = 8 * a;
        }

        // Calculate price for number of server selection
        if(c <= 100) {
            d = 0;
        }
        else if (c > 100 && c <= 150) {
            d = (c-100) * 0.2;
        }
        else 
        {
            d = (c-100) * 0.2 + (c - 150) * 0.1; 
        }
let ca = Number(c);
let ba = Number(b);
let da = Number(d);

        var f = ca + ba + da;  // Grand Total
        $('#pricepc').val(b);  // Update PC Price
        $('#priceserver').val(d);  // Update Server Price
        $('#total').val(f);   // Update Total

      }
      $('#pricepc,#priceserver,#quantitypc,#quantityserver').on('change', compute);
})();
</script>
</body>
</html>

убрал лишнее из вашего кода, такой вариант у меня отрабатывает нормально.

БЛОГ НА HUSL

Не работает JS, на сайте ничего не меняется

Ответы (1 шт):