5

我有一个表单，我希望能够比较在两个输入框中输入的数字，如果它们匹配，那么我想显示一个竖起大拇指的图像，如果他们不想显示一个竖起大拇指的图像。我正在尝试使用 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

2

clean and easy way with js is following...

after edit

<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>
于 2013-07-26T11:21:55.910 回答
0

div使用 id创建一个空img1并使用此代码

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">';
}
于 2013-07-26T11:05:17.017 回答
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 回答