入力時にImg Srcを追加する

Question

入力ボックスに入力すると、入力ボックスは自分の画像のsrc（API画像）の終わりを変更するフォームを作りたいと思う。

ので、画像のコードは次のようになります。

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

私はデータの後に行くことにテキストボックスからの入力を必要とする=と= 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" 

ご協力いただきましてありがとうございます。

Answer 1

。

明らかに、追加したボタンのようなユーザーアクションを確認するための入力が必要です。

編集：画像を生成するサーバーを悪用しないために、私は意図的にkeyUpイベントを使用しないことを選択しました。

ボタンをクリックすると、Javascriptの小さな部分がイメージタグのsrcを更新します。

IDを使用して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="" />

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/">