JavaScript click не рабочая переменная

Question

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

Пример: при нажатии на «Youtube» это в текстовое поле вставить URL-адрес YouTube.

            <div class="jumbotron">
            <h1 class="display-3"><?php echo $config['website-name']; ?></h1>
            <p class="lead"><?php echo $lang["slogan"]; ?></p>
            <div class="btn-group" role="group">
                <a id="twitter" class="btn btn-info" href="#"><?php echo $lang["twitter_1"]; ?></a>
                <a id="youtube" class="btn btn-danger" href="#"><?php echo $lang["youtube_1"]; ?></a>
                <a id="facebook" class="btn btn-primary" href="#"><?php echo $lang["facebook_1"]; ?></a>
            </div>
            <br>
            <br>
            <div class="btn-group" role="group">
                <a id="vikipedi" class="btn btn-secondary" href="#"><?php echo $lang["wikipedia"]; ?></a>
                <a id="google" class="btn btn-success" href="#"><?php echo $lang["google_1"]; ?></a>
            </div>
            <p class="lead">
            <form class="form-group" action="index.php" method="post">
                <input id="url" name="url" type="url" class="form-control" autocomplete="on" placeholder="http://"
                       autofocus required/>
                <br>
                <input class="btn btn-primary btn-lg" type="submit" value="<?php echo $lang["go"]; ?>"/>
            </form>
        </div>
        <div class="text-center">
            <p style="font-size:11px">
                <small><?php echo $lang["agree"]; ?> <a
                            href="<?php echo $config['website-url']; ?>/?tos"><?php echo $lang["tos_2"]; ?></a>
                </small>
            </p>
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $('#twitter').click(function () {
        $('#url').val('https://twitter.com');
    });
    $('#youtube').click(function () {
        $('#url').val('https://youtube.com');
    });
    $('#facebook').click(function () {
        $('#url').val('https://facebook.com');
    });
    $('#google').click(function () {
        $('#url').val('https://google.com');
    });
    $('#vikipedi').click(function () {
        $('#url').val('https://wikipedia.org');
    });
</script>

Edit:

Появляется следующая ошибка:

но затребовал небезопасный скрипт 'code.jquery.com/jquery-3.3.1.js'; Этот запрос был заблокирован; содержимое должно быть передано по протоколу HTTPS.

Answer 1

После просмотра этого комментария в области комментариев:

Я обнаружил проблему, но запросил небезопасный скрипт 'code.jquery.com/jquery-3.3.1.js'; Этот запрос был заблокирован; содержимое должно быть передано по HTTPS.

Как указано в нескольких других ответах об использовании HTTPS в качестве источника скрипта (к которому они верны, и я не убираю ни у того, ни другого), было бы лучше, если бы вы использовали следующий метод, который автоматически разрешает HTTP или HTTPS, учитывая, какой протокол URL используется в данной среде.

<script src="//code.jquery.com/jquery-3.3.1.js"></script>

без протокола http:. Этот метод особенно полезен для других методов, таких как изображения, CSS, URL-адреса, FTP или что-либо, что должно использоваться / извлекаться из внешнего протокола.

Обратите внимание , что вы не сможете использовать вышеуказанный метод при доступе к файлам со своего компьютера как file:///; этот метод предназначен только для внешнего ресурса. Ну, вы можете, но скрипт просто не загрузится.

Answer 2

Используя HTTPS и $(document).ready(function(){}) ваш код будет работать.

    <div class="jumbotron">
            <h1 class="display-3"><?php echo $config['website-name']; ?></h1>
            <p class="lead"><?php echo $lang["slogan"]; ?></p>
            <div class="btn-group" role="group">
                <a id="twitter" class="btn btn-info" href="#"><?php echo $lang["twitter_1"]; ?></a>
                <a id="youtube" class="btn btn-danger" href="#"><?php echo $lang["youtube_1"]; ?></a>
                <a id="facebook" class="btn btn-primary" href="#"><?php echo $lang["facebook_1"]; ?></a>
            </div>
            <br>
            <br>
            <div class="btn-group" role="group">
                <a id="vikipedi" class="btn btn-secondary" href="#"><?php echo $lang["wikipedia"]; ?></a>
                <a id="google" class="btn btn-success" href="#"><?php echo $lang["google_1"]; ?></a>
            </div>
            <p class="lead">
            <form class="form-group" action="index.php" method="post">
                <input id="url" name="url" type="url" class="form-control" autocomplete="on" placeholder="http://"
                       autofocus required/>
                <br>
                <input class="btn btn-primary btn-lg" type="submit" value="<?php echo $lang["go"]; ?>"/>
            </form>
        </div>
        <div class="text-center">
            <p style="font-size:11px">
                <small><?php echo $lang["agree"]; ?> <a
                            href="<?php echo $config['website-url']; ?>/?tos"><?php echo $lang["tos_2"]; ?></a>
                </small>
            </p>
        </div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
  $(document).ready(function() {
    $('#twitter').click(function() {
      $('#url').val('https://twitter.com');
    });
    $('#youtube').click(function() {
      $('#url').val('https://youtube.com');
    });
    $('#facebook').click(function() {
      $('#url').val('https://facebook.com');
    });
    $('#google').click(function() {
      $('#url').val('https://google.com');
    });
    $('#vikipedi').click(function() {
      $('#url').val('https://wikipedia.org');
    });
  });

</script>

Answer 3

Использование <script src="https://code.jquery.com/jquery-3.3.1.js"></script> (уведомление https)

Answer 4

Элемент с идентификатором должен быть только один на странице. Я думаю, у вас есть больше, когда один элемент с идентификатором #twitter. И включите весь код JS внизу страницы.