使用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