フォームからのテキストに基づく画像のポップアップウィンドウ

Question

私はhtml/javascriptコーディングが初めてであることを皆さんに事前に知ってもらいたいので、この質問が単純すぎるようであれば謝ります。私は答えを研究しようとしたし、私がしたいと思う正確に見つけることができないようです。

私がしたいのは、フォームに入力された内容に基づいて画像をポップアップする非常に単純なフォームです。すなわち、 "a"を入力するとリンゴの画像がポップアップしますが、 "b"を入力すると鳥の画像がポップアップします。

私は私がどのように把握することはできませんコードの2枚、シンプルなフォーム用とポップアップのための1（ただし、ポップアップがリンクしていないフォームの項目をクリックするに基づいていた）

を見つけました2つを組み合わせる。私は自分のコードをコピーしたときにここで

http://sparkycat4e.com/htmlformtest3.html

...私が持っているものだ申し訳ありませんが、私はそれはそれを実行しようとした、リンクを投稿していました。

ご協力いただければ幸いです。

Answer 1

私はあなたのソースコードをチェックしましたが、括弧や誤植がなければほとんどそれを得ました。私は（ちょうど1つの<script>タグ内のすべてのJSコードを入れて）ここに少しそれをクリーンアップして作られたいくつかの小さな改善（switchを使用し、そして名のキャメルケースを使用）：

<script type='text/javascript'> 
var newWindow = ''; 

function popItUp(url) { 
    if (newWindow.location && !newWindow.closed) { 
    newWindow.location.href = url; 
    newWindow.focus(); 
    } else { 
    newWindow = window.open(url, 'htmlname', 'width=404,height=316,resizable=1'); 
    } 
} 

function allLetter(text) { 
    switch (text) { 
    case "a": 
     popItUp("https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201709101434"); 
     break; 
    case "b": 
     popItUp("https://i.pinimg.com/736x/03/59/20/035920dbccef6d85fee537765a5c3f08--celebrity-videos-celebrity-baby-names.jpg"); 
     break; 
    default: 
     alert('Please input alphabet characters only'); 
    } 
} 
</script> 

はあなたのフォームが今の提出に直接値を渡します：

<form name="form1" action="#"> 
    <ul> 
    <li>Code:</li> 
    <li><input type='text' name='text1' /></li> 
    <li class="rq">*Enter alphabets only.</li> 
    <li>&nbsp;</li> 
    <li><input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1.value)" /></li> 
    <li>&nbsp;</li> 
    </ul> 
</form>