Я хочу сделать форму, где, когда пользователь вводит в поле ввода, поле ввода меняет окончание 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"
Любая помощь приветствуется!
2 ответа
Вы можете сделать это так.
Очевидно, вам нужен ввод и что-то для подтверждения действий пользователя, например кнопка, которую я добавил.
Редактировать: чтобы не злоупотреблять сервером, генерирующим изображение, я сознательно выбрал не использовать событие 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="" />
Здесь код в простом 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/">
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.