使用Javascript如果2個字段的值相等，我如何顯示圖像？

Question

我有一個表格，我希望能夠比較在兩個輸入框中輸入的數字，如果它們匹配，那么我想顯示一個豎起大拇指的圖像，如果他們不，我想顯示一個拇指向下的圖像。 我正在嘗試使用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>

但是如果輸入匹配同時顯示拇指向上和拇指向下，則總是顯示向下的圖像然后添加豎起圖像。 我不希望有一個圖像，除非值匹配或不匹配，但只有在輸入值后。

Answer 1

js干凈簡單的方法如下......

編輯后

<html>
<head>
</head>

<body>
    <form>
        <input type="text" name="name" id="firstField"/>
        <img src="images/thumbs_up.png" style="display: none; background: #000;" id="image"/>
        <img src="images/thumbs_down.png" style="display: none; background: #ff0000;" 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('image');
    var image2 =    document.getElementById('image2');

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


</script>
</html>

Answer 2

創建一個id為img1的空div並使用此代碼

if( document.getElementById("scan_out").value == document.getElementById("scan_in").value)

{ 
     document.getElementById("img1").innerHTML='<img src="path/to/image.png">';
}
    else if( document.getElementById("scan_out").value >= document.getElementById("scan_in").value){
    document.getElementById("img1").innerHTML='<img src="path/to/image2.png">';
}

Answer 3

 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";
}

Answer 4

這是一個如何匹配數字的示例。

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';

Answer 5

如果您不熟悉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>放在要顯示圖標的位置。

使用Javascript如果2個字段的值相等，我如何顯示圖像？

問題描述

5 個解決方案

解決方案1
2 已采納 2013-07-26 11:21:55

解決方案2
0 2013-07-26 11:05:17

解決方案3
0 2013-07-26 11:09:38

解決方案4
0 2013-07-26 11:10:03

解決方案5
0 2013-07-26 11:11:14

使用Javascript如果2個字段的值相等，我如何顯示圖像？

問題描述

5 個解決方案

解決方案1 2 已采納 2013-07-26 11:21:55

解決方案2 0 2013-07-26 11:05:17

解決方案3 0 2013-07-26 11:09:38

解決方案4 0 2013-07-26 11:10:03

解決方案5 0 2013-07-26 11:11:14

解決方案1
2 已采納 2013-07-26 11:21:55

解決方案2
0 2013-07-26 11:05:17

解決方案3
0 2013-07-26 11:09:38

解決方案4
0 2013-07-26 11:10:03

解決方案5
0 2013-07-26 11:11:14