5

2 つの入力ボックスに入力された数値を比較できるようにしたいフォームがあり、それらが一致する場合は、親指を上に向けた画像を表示したいのですが、そうでない場合は、親指を下に向けた画像を表示したいと考えています。これを行うためにJavaScriptを使用しようとしていますが、画像を表示する方法がわかりません。このトピックを検索しましたが、必要な方法で JavaScript を使用して画像を表示する方法を説明するものは見つかりません。これが私のコードのこれまでの内容です。私が持っているものが正しいかどうかさえわかりません。

if document.getElementById("scan_out").value == document.getElementById("scan_in").value 
//do something here to display thumbs_up.png
else document.getElementById("scan_out").value >= document.getElementById("scan_in").value
//do something here to display thumbs_down.png

これは JavaScript での私の最初の試みなので、正しい軌道に乗っているかどうかわかりません。

これは、以下の回答から得られた私が今持っているものです

<html>
<head>
</head>

<body>
    <form>
        <input type="text" name="name" id="firstField"/>
        <img src="images/thumbs_up.png" style="display: none;" id="image1"/>
        <img src="images/thumbs_down.png" style="display:block;" id=image2"/>
        <input type="text" name="name" id="secField" onchange="equals()"/>
    </form>
</body>

<script type="text/javascript">
    var firstField = document.getElementById('firstField');
    var secField =   document.getElementById('secField');
    var image =    document.getElementById('image2');
    var image =    document.getElementById('image1');

    function equals() {
        if(firstField.value == secField.value) {
            image.style.display = 'block';
        }
        else {
            image.style.display = 'none';
        }
    }
firstField.onkeyup = function() { equals() }
    secField.onkeyup = function() { equals() }


</script>

ただし、これは常に親指の画像を表示し、入力が一致する場合は親指の画像を追加し、親指と親指の両方を表示します。値が一致するか一致しない場合を除き、値が入力された後にのみ画像が表示されるようにしたくありません。

4

5 に答える 5

0 
 if(document.getElementById("scan_out").value == document.getElementById("scan_in").value){
     document.getElementById("img_id").src= "images/xyz/someimage.png";
    }
    else if(document.getElementById("scan_out").value == document.getElementById("scan_in").value){
   document.getElementById("img_id1").src= "images/xyz/someimage.png";
}
于 2013-07-26T11:09:38.993 に答える
0

数字を一致させる方法の例を次に示します。

var n1 = parseInt(document.getElementById('text1').value, 10);
var n2 = parseInt(document.getElementById('text2').value, 10);
var l = document.querySelector('label');
if (n1 == n2)
    l.innerHTML = 'Number1 = Number2';
else
    l.innerHTML = 'Number1 != Number2';
于 2013-07-26T11:10:03.463 に答える
0

JavaScript を初めて使用する場合は、間違いなく jQuery を使用する必要があります。

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

if ( $("#scan_out").val() === $("#scan_in").val() ) {
   $("#scan_icon").html('<img src="thumbs_up.png">');
} else {
   $("#scan_icon").html('<img src="thumbs_down.png">');
}

<div id="scan_icon"></div>アイコンを表示したい場所に配置する必要があります。

于 2013-07-26T11:11:14.927 に答える