Как добавить Html+js в Elementor Wordpress?

Question

[Slava29]

Доброго времени суток, сразу скажу - в теме полный ноль.
Хочу добавить генератор паролей в конструктор Elementor с помощью "HTML- код". Вставляю форму и скрипт, но скрипт не работает, что я делаю не так?

ВОТ САМ КОД:

spoiler

<form class="calc-form">
    <div class="calc-frow">
        <div class="calc-fleft">Длина пароля</div>
        <div class="calc-fright">
            <input type="number" step="1" pattern="\d*" name="length" class="calc-inp" style="width:60px; padding-right: 0;" min="1" max="32" value="8" maxlength="2">
        </div>
    </div>
    <div class="calc-frow">
        <div class="calc-fleft">Используемые символы</div>
        <div class="calc-fright">
            <div class="calc-input w150p">
                <label><input type="checkbox" checked class="use_letters" /> Буквы</label>
                &nbsp;&nbsp;&nbsp;<label><input type="checkbox" checked class="use_digits" /> Цифры</label>
                &nbsp;&nbsp;&nbsp;<label><input type="checkbox"  class="use_symbols" /> Спец. символы</label>
            </div>
        </div>
    </div>
    <div class="calc-frow">
        <div class="calc-fleft">Пароль</div>
        <div class="calc-fright">
            <input type="text" id="result-password" class="calc-inp" style="width:300px;font-size: 10px;" />
        </div>
    </div>

    <div class="calc-frow button-row">
        <div class="calc-fright">
            <input type="button" class="calc-submit" value="Генерировать"  onclick="generatePassword()">
        </div>
    </div>

</form>

<script type="text/javascript">
    //<!--
    function generatePassword() {
        var letters = 'abcdefghijklmnopqrstuvwxyz'
        var digits = '0123456789'
        var symbols = '%*()?@#$~'
        var str = ($('.use_letters').prop('checked') ? letters : '') + ($('.use_digits').prop('checked') ? digits : '') + ($('.use_symbols').prop('checked') ? symbols : '')
        var length = $('input[name=length]').val()
        var password = ''
        var next
        for (var i = 0; i < length; i++) {
            next = str[Math.floor(Math.random() * (str.length - 1 - 0 + 1)) + 0]
            password+= Math.round(Math.random()) ? next : next.toUpperCase()
        }
        var q = 1
        var int = setInterval(function() {
            if (q >= length) clearInterval(int)
            $('#result-password').val(password.substr(0,q))
            q++
        }, 35)
    }

    $(document).ready(function() {

        generatePassword()

        $('input[name=length]').blur(function() {
            if ($(this).val() > 32) {
                $(this).val('32')
            }
        })

    })
        //-->
</script>

Answer 1

[KomuZa]

1. Убираем обработчик клика по кнопке "Генерировать" из тэга input внутрь скрипта:
было

<input type="button" class="calc-submit" value="Генерировать"  onclick="generatePassword()">

стало

<input type="button" class="calc-submit" value="Генерировать" >

было

$(document).ready(function() {
  // . . .
})

стало

$(document).ready(function() {
  // . . .
  $('.calc-submit').on('click', generatePassword)
})

2. Чтобы скрипт понял, что $ это jQuery, оборачиваем в !function($) { . . . }(jQuery).

ИТОГО

<script type="text/javascript">
    //<!--
    !function($) {
    function generatePassword() {
        var letters = 'abcdefghijklmnopqrstuvwxyz'
        var digits = '0123456789'
        var symbols = '%*()?@#$~'
        var str = ($('.use_letters').prop('checked') ? letters : '') + ($('.use_digits').prop('checked') ? digits : '') + ($('.use_symbols').prop('checked') ? symbols : '')
        var length = $('input[name=length]').val()
        var password = ''
        var next
        for (var i = 0; i < length; i++) {
            next = str[Math.floor(Math.random() * (str.length - 1 - 0 + 1)) + 0]
            password+= Math.round(Math.random()) ? next : next.toUpperCase()
        }
        var q = 1
        var int = setInterval(function() {
            if (q >= length) clearInterval(int)
            $('#result-password').val(password.substr(0,q))
            q++
        }, 35)
    }

    $(document).ready(function() {

        generatePassword()

        $('input[name=length]').blur(function() {
            if ($(this).val() > 32) {
                $(this).val('32')
            }
        })
        
        $('.calc-submit').on('click', generatePassword)

    })
    }(jQuery)
        //-->
</script>