Не отрабатывает JavaScript код на странице.

nameless_python · Сообщение **nameless_python** » 2020.06.29, 11:59

Привет, форум! надеюсь на Вашу помощь, гугол на призывы остался глух.

Имеется проект на базовом шаблоне. На главной странице размещен калькулятор затрат на топливо:

Код: Выделить всё

<form action="">
	<h4>2. Выберите марку бензина</h4>
            <label for="92">92</label>
        <input type="radio" name="price" value="42" class="price" id="92" checked>
            <label for="95">95</label>
        <input type="radio" name="price" value="45" class="price" id="95">
            <label for="98">98</label>
        <input type="radio" name="price" value="48" class="price" id="98">

        <h4>3. Сколько км. вы проезжаете за день?</h4>
            <label for="myRange"></label>
        <input type="range" name="mileage" min="1" max="500" value="50" step="1" class="slider" id="myRange">
        <p>Км: <span id="demo"></span></p>

        <h4>4. Укажите расход в км. на 100 литров</h4>
            <label for="myRange2"></label>
        <input type="range" name="rate" min="1" max="100" value="13" step="1" class="slider" id="myRange2">
        <p>Л: <span id="demo2"></span></p>
        
    <input type="button" id="r" name="send" value="Рассчитать" />
    <label for="r">Результат:</label>
    <input type="text" id="" name="result" placeholder="Ответ" />

</form>

AppAsset.php :

Код: Выделить всё

<?php


namespace app\assets;


use yii\web\AssetBundle;

class PublicAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
            "public_assets/css/bootstrap.css",
            "public_assets/js/source/jquery.fancybox.css",
            "public_assets/css/animations.min.css",
            "public_assets/css/style.css",
    ];
    public $js = [
            "public_assets/js/jquery-3.5.1.js",
            "public_assets/js/jquery.isotope.js",
            "public_assets/js/bootstrap.js",
            "public_assets/js/vegas/jquery.vegas.min.js",
            "public_assets/js/jquery.easing.min.js",
            "public_assets/js/source/jquery.fancybox.js",
            "public_assets/js/appear.min.js",
            "public_assets/js/animations.min.js",
            "public_assets/js/calc.js",
    ];
    public $jsOptions = [
        'position' => \yii\web\View::POS_HEAD
    ];
    public $depends = [
    ];
}

calc.js :

Код: Выделить всё

$(document).ready(function() { // Ждём загрузки страницы
    "use strict";
    $("input[name=send]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var mileage = +$("input[name=mileage]").val(); // Переменная пробега
        var rate = +$("input[name=rate]").val(); // Переменная расхода
        var volume = mileage * rate * 365 / 100; // Переменная объема топлива за год
        var price = +$("input[name=price]:checked").val(); // Переменная цены
        var result = volume * price; // Переменная результата

        $("input[name=result]").val(result.toFixed()); // записываем результат
    });
});

Все стили и скрипты как положено подключились в <head> сайта.

Суть проблемы в том, что калькулятор отрабатывает как положено до того момента, как начинается округление result.toFixed(). Такое ощущение, что функция просто не существует, потому что никак не отрабатывает. Результат постоянно выдается со знаками после запятой. При попытке проверить что возвращает console.log(result) - ноль реакции, в консоли хрома пусто, как будто ничего и быть не должно. И важный момент - в отдельном от проекта обычном файле html данный скрипт работает как часы и console.log() возвращает в консоли хрома любую запрошенную инфу. В чем тут подвох?

Только что проверил, что если скрипт вставить в html коде самой страницы, то всё работает. Вышеуказанные проблемы появляются только если скрипт подключен из отдельного файла через PublicAssets.php

skynin · Сообщение **skynin** » 2020.06.29, 14:18

nameless_python писал(а): ↑2020.06.29, 11:59 Суть проблемы в том, что калькулятор отрабатывает как положено до того момента, как начинается округление result.toFixed()

калькулятор отрабатывает как положено до того момента, как начинается

как вы это определили?

поставьте
console.log('Обработчик на:', $("input[name=send]"));

сразу после:
$(document).ready(function() { // Ждём загрузки страницы

unknownby · Сообщение **unknownby** » 2020.06.29, 15:31

Попробуй заменить

Код: Выделить всё

<input type="text" id="" name="result" placeholder="Ответ" />

на

Код: Выделить всё

<div class="calculate-box"></div>

И пропиши в конце вместо

Код: Выделить всё

$("input[name=result]").val(result.toFixed()); // записываем результат

Вот такое

Код: Выделить всё

$('.calculate-box').html(result.toFixed(2));

И зачем ты плюсы прописываешь?

Код: Выделить всё

$(document).ready(function() { // Ждём загрузки страницы
    "use strict";
    $("input[name=send]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var mileage = $("input[name=mileage]").val(); // Переменная пробега
        var rate = $("input[name=rate]").val(); // Переменная расхода
        var volume = mileage * rate * 365 / 100; // Переменная объема топлива за год
        var price = $("input[name=price]:checked").val(); // Переменная цены
        var result = volume * price; // Переменная результата

        $('.calculate-box').html(result.toFixed(2));
    });
});

nameless_python · Сообщение **nameless_python** » 2020.06.30, 06:24

skynin писал(а): ↑2020.06.29, 14:18
nameless_python писал(а): ↑2020.06.29, 11:59 Суть проблемы в том, что калькулятор отрабатывает как положено до того момента, как начинается округление result.toFixed()
калькулятор отрабатывает как положено до того момента, как начинается

как вы это определили?

поставьте
console.log('Обработчик на:', $("input[name=send]"));

сразу после:
$(document).ready(function() { // Ждём загрузки страницы

Определил путем вычисления "вручную". Попытки вызвать метод console.log в существующем коде ничего не дают, хром просто игнорирует его и консоль остается пустой. И совсем обратная ситуация при вставке кода в теги <script> внутри файла index.php. Всё работает как нужно и toFixed() и console.log() показывают то, что ожидается. Также провел эксперимент и выяснил: если создать любой файл script.js, написать в нем код без jQuery , к примеру:

Код: Выделить всё

var a = 5;
console.log(a.toFixed());

и подключить его через PublicAssets, то вполне нормально консоль показывает "5". Но как только пытаюсь подключить имеющийся calc.js: половина кода работает - половина нет. Я не специалист в javascript, но такое ощущение, что конфликт возникает именно при подключении файла через PublicAssets извне. Возможно проблема в выполнении jQuery, код писал не сам, а взял из интернета и доработал под себя. В общем пока калькулятор работает из тегов на странице..

nameless_python · Сообщение **nameless_python** » 2020.06.30, 06:47

unknownby писал(а): ↑2020.06.29, 15:31 Попробуй заменить

Код: Выделить всё

<input type="text" id="" name="result" placeholder="Ответ" />

на

Код: Выделить всё

<div class="calculate-box"></div>

И пропиши в конце вместо

Код: Выделить всё

$("input[name=result]").val(result.toFixed()); // записываем результат

Вот такое

Код: Выделить всё

$('.calculate-box').html(result.toFixed(2));

И зачем ты плюсы прописываешь?

Код: Выделить всё

$(document).ready(function() { // Ждём загрузки страницы
    "use strict";
    $("input[name=send]").click(function() { // Событие нажатия на кнопку "Расчёт"
        var mileage = $("input[name=mileage]").val(); // Переменная пробега
        var rate = $("input[name=rate]").val(); // Переменная расхода
        var volume = mileage * rate * 365 / 100; // Переменная объема топлива за год
        var price = $("input[name=price]:checked").val(); // Переменная цены
        var result = volume * price; // Переменная результата

        $('.calculate-box').html(result.toFixed(2));
    });
});

Сделал по вашему совету, в плане удобства, несомненно так лучше, но решилась проблема не так

nameless_python · Сообщение **nameless_python** » 2020.06.30, 06:51

skynin, unknownby спасибо за помощь, если бы не танцы с бубном по вашим советам так бы и оставил как есть. Судя по всему либо сервер глючил либо phpstorm издевался надо мной (останется загадкой), но перезагрузка после установки стороннего софта решила проблему. никогда бы не подумал, что такой бред может случиться.

Yii Framework

Не отрабатывает JavaScript код на странице.

Не отрабатывает JavaScript код на странице.

Re: Не отрабатывает JavaScript код на странице.

Re: Не отрабатывает JavaScript код на странице.

Re: Не отрабатывает JavaScript код на странице.

Re: Не отрабатывает JavaScript код на странице.

Re: Не отрабатывает JavaScript код на странице.