インデックスを使用して画像にアクセスして表示する

Question

非常に基本的なページには6つの画像とテキストボックスが表示され、新しいウィンドウに表示する画像の数を入力するように求められます。

アイデアは、ほとんどの場合、DOMを制御するために純粋なjavascriptを使用してページを操作することです。表示されているすべてのjQueryは受け入れられますが、インデックスに登録して画像にアクセスして表示する必要があります。

function checkInput() { 
    var input = document.getElementById('txtNum').value; //get image number to display 
    if (input < 1 || input > 6) { 
    $('#error').empty().append('!Please enter a number between 1 and 6!'); 
    return; 
    } else { 
    $('#error').empty(); 
    var indexSrc = document.images[input-1].src; 
    var newWindow = window.open("", "Image", "height=500", "width=500"); 
    newWindow.document.write( 
     "<img src='indexSrc' />" //error 
    ) 
    } 
} 

ロジックがシンプルであり、それは実際に新しいウィンドウに画像を表示する以外にも、正しく動作しているようです。私は現在、イメージsrcを変数に格納していて、同じ変数を使用してイメージを表示しようとしています。私はこれが受け入れられないと仮定していますが、正しい解決策を見つけることができませんでした。助言がありますか？

Answer 1

あなたは

"<img src='" + indexSrc + "'/>" 

によって

"<img src='indexSrc'/>" 

を交換し、それが動作するかどうかを確認しようとすることができます。

文字列に 'indexSrc'を入力すると、実際に作成した変数indexSrcを参照していません。