Добавить Img Src при изменении ввода

Question

Я хочу сделать форму, где, когда пользователь вводит в поле ввода, поле ввода меняет окончание src моего изображения (который является изображением API).

Итак, код изображения выглядит так:

<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" />

Мне нужен ввод из текстового поля, чтобы идти после данных = и до & size = 100x100

Я попробовал несколько способов сделать это, но не совсем понял:

$(function() {
                        $('#linktextbox').onchange( function() {
                            window.location = document.getElementById('baseUrl').attr('href') + '/' + $('#linktextbox').val();
                            return false;
                        });
                    });

Я также попробовал:

var link = document.getElementById("baseUrl");
    link.href = "http://api.qrserver.com/v1/create-qr-code/?data="+document.getElementById('linktextbox')+"&size=100x100"

Любая помощь приветствуется!

javascript jquery html

-2

Nathan Brown 24 Апр 2017 в 19:08

Answer 1

Вы можете сделать это так.

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

Редактировать: чтобы не злоупотреблять сервером, генерирующим изображение, я сознательно выбрал не использовать событие keyUp.

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

Я использовал идентификаторы для идентификации элементов HTML, но есть несколько способов найти конкретный элемент.

function updateQR (){
   document.getElementById('image').src = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(document.getElementById('textInput').value) + "&size=100x100";

}

    <input id="textInput" type="text">
    <br>
    <button onclick="updateQR()">Update QR code</button>
    <br>
    <br>
    <img id="image" src="" />

2

Thakkie 24 Апр 2017 в 16:21

Answer 2

Здесь код в простом JavaScript

function updateQr(ele){
  document.getElementById("qr").src = "https://api.qrserver.com/v1/create-qr-code/?data="+encodeURIComponent(ele.value)+"&size=100x100/";
}

<input type="textbox" value="HelloWorld" onKeyUp="updateQr(this)"/><br/><br/>
<img id="qr" src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100/">

1

Hari Das 24 Апр 2017 в 16:20

Добавить Img Src при изменении ввода

2 ответа

Похожие вопросы

Новые вопросы

javascript