В всплывающем окне скрипт срабатывает со 2 клика

Question

Уже голова не варит куда копать, помогайте комрады!

Ссылка на кнопке -

<div class="btn btn--wide" onclick="javascript:square2()" id="goc">Подай заявку сейчас!</div>

Сам скрипт -

<script type="text/javascript">
function square2() {
 jQuery( "#goc" ).click(function() {
    var g1 = jQuery('#output1').text();
    var g2 = jQuery('#output2').text();
    var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
    location.href = g3;
  });
  }</script>
 <script type="text/javascript">
     jQuery( "#goc" ).click(function() {
    var g1 = jQuery('#output1').text();
    var g2 = jQuery('#output2').text();
    var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
    location.href = g3;
  });

window.onload = function(){

var output1 = document.getElementById("output1");
var output2 = document.getElementById("output2");
var output3 = document.getElementById("output3");

   setTimeout(function() {
    output3.innerHTML =(output1.innerHTML*1)+(output1.innerHTML/100)*output2.innerHTML+" р." ;
    }, 8);

jQuery("#output1").on('DOMSubtreeModified',function(){
   output3.style.opacity = 0;
   setTimeout(function() {
    output3.innerHTML =(output1.innerHTML*1)+(output1.innerHTML/100)*output2.innerHTML+" р." ;
    output3.style.opacity = 1;
    }, 8);
});

jQuery("#output2").on('DOMSubtreeModified',function(){
  output3.style.opacity = 0;
   setTimeout(function() {
    output3.innerHTML =(output1.innerHTML*1)+(output1.innerHTML/100)*output2.innerHTML+" р." ;
    output3.style.opacity = 1;
    }, 8);
});
};
 </script>

Работает только через двойной клик и ни как больше...

Answer 1

Ваш код использует два способа задать действие при щелчке:

через jQuery.click(...)
через onclick="javascript:square2()"

В обоих способах есть баги. Нужно оставить только какой-то один, и исправить баги.

Обычно рекомендуют использовать первый способ.

Первый способ скорее всего не срабатывает из-за того, что ваш код из второго тега script расположен выше, чем div#goc. На момент вызова этого кода div#goc ещё не существует (браузер ещё не дошёл до него и не создал этот элемент), поэтому jQuery( "#goc" ).click(...) уходит в пустоту.

Проблему можно решить, отложив выполнение кода до тех пор, пока все элементы на странице не будут готовы. В jQuery для этого есть функция jQuery(document).ready(function () {...}). Эта функция используется так часто, что для неё есть сокращённая запись — jQuery(function () {...})

То есть вот этот код из второго скрипта:

jQuery( "#goc" ).click(function() {
  var g1 = jQuery('#output1').text();
  var g2 = jQuery('#output2').text();
  var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
  location.href = g3;
});

можно преобразовать таким образом:

jQuery(function () {
  jQuery( "#goc" ).click(function() {
    var g1 = jQuery('#output1').text();
    var g2 = jQuery('#output2').text();
    var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
    location.href = g3;
  });
});

Второй способ не работает потому, что внутри функции square2 не происходит самого действия. Первый щелчок задаёт поведение при щелчках (следующих щелчках!), а больше ничего не делает. Вот и получается, что функция работает только при втором щелчке.

Чтобы функция работала, просто поместите код напрямую, а не внутри jQuery( "#goc" ).click(function() {...}).

То есть вместо такого:

function square2() {
 jQuery( "#goc" ).click(function() {
    var g1 = jQuery('#output1').text();
    var g2 = jQuery('#output2').text();
    var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
    location.href = g3;
  });
}

Используйте такое:

function square2() {
  var g1 = jQuery('#output1').text();
  var g2 = jQuery('#output2').text();
  var g3 = 'https://lk.zaimdam.ru/?creditproduct=%D0%A1%D0%A2%D0%90%D0%9D%D0%94%D0%90%D0%A0%D0%A2&amount='+ g1 +'&period='+ g2;
  location.href = g3;
}

БЛОГ НА HUSL

В всплывающем окне скрипт срабатывает со 2 клика

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