如果 2 个字段的值相等，使用 Javascript 如何显示图像？
Posted
技术标签:
【中文标题】如果 2 个字段的值相等，使用 Javascript 如何显示图像？【英文标题】：Using Javascript how can I display an image if the value of 2 fields are equal? 【发布时间】：2013-07-26 14:54:40 【问题描述】：我有一个表单，我希望能够比较在两个输入框中输入的数字，如果它们匹配，那么我想显示一个竖起大拇指的图像，如果它们不匹配我想显示一个竖起大拇指的图像。我正在尝试使用 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>
但这总是显示一个拇指向下的图像，然后如果输入匹配显示拇指向上和拇指向下，则添加拇指向上图像。我不希望有图像，除非值匹配或不匹配，但只有在输入值之后。
【问题讨论】：
这就是你尝试过的全部吗？ 相信你的问题可以在这个帖子里得到解答：***.com/questions/554273/… @Pablo208 我已经阅读了那个帖子，但它没有回答我的问题 这会帮助你***.com/questions/5451445/… @BindiyaPatoliya 谢谢，但这无济于事，我已经查看了 *** 上已经给出的答案的所有建议，但没有一个给出关于如何显示图像的明确答案跨度> 【参考方案1】：创建一个 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">';
【讨论】：
简单但有效。 你为什么从 OP 的帖子中复制伪代码？这是行不通的。即使你会做这个 JS，它总是会显示“thumbdown”或没有任何变化。 嗯，海报并没有真正给我们很多工作。这个答案纯粹是如何像海报问的那样使用javascripts显示和图像？innerHTML 不是函数，而是属性，仅供参考。【参考方案2】：
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";
【讨论】：
这里同样缺乏逻辑......“if they match then ... thumbs up ... if they don't ... thumbs down”。
我已经对其进行了测试，它可以正常工作。你能指出我哪里出错了吗？如果你的答案有效，我将删除我的答案...你是在谈论用图像替换 div 还是有图有图？？
首先检查 == ，然后 >= 让这很有趣。抱歉标记，我现在正在打电话，刚刚来了一场雷雨。【参考方案3】：
这是一个如何匹配数字的示例。
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';
【讨论】：
【参考方案4】：如果你是 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 新手，那么您绝对不应该使用 jQuery。不过，这不是我的反对意见。 @Richard 我试过了，但没有用，我按照你的方式添加了代码，并将 div 放在我想要显示图像的位置，但是当我在输入中输入值时没有任何反应盒子 @user594112 你一定是做错了，它有效，看fiddle：jsfiddle.net/cqHtF @Teemu：为什么不呢？如果教得好，它可以让你编写比纯 JS 更简洁的代码。请解释你的反对意见，我对你的意见很感兴趣。 在学习 JS 尤其是 DOM 的基础知识时，您将更好地了解使用纯 JS 时所有的工作原理。即使在 SO，我们也可以看到从 jQuery 开始的后果。当一个只知道 jQuery 的程序员得到一份工作，而这必须在没有 jQuery 的情况下完成时，我们在这里回答如下问题：为什么我的 getElementById 不起作用？var a = document.getElementById('#foo');【参考方案5】：
下面是干净简单的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>
【讨论】：
你为什么要把equals()包装在一个匿名函数中？只需使用firstField.onkeyup = equals; 并使用addEventListener。
谢谢 :) 你能告诉我更多关于addEventListener 的信息或给我一些链接吗？？
@maxART 谢谢，这对显示图像有很大帮助，只需要解决一些问题，例如在比较值之前不显示图像。
@maxART 谢谢我的努力，但它仍然是一样的，当页面加载时它显示拇指向下，当我将相等的值添加到每个框时，它显示一个拇指向上和向下拇指。我不知道如何从页面的初始加载中删除拇指向下。
@maxART 对上述内容的更正，注意到编辑为时已晚，但您的更改确实有效，它现在只显示一个相同值的图像，只需要弄清楚如何停止拇指向下在第一个框中输入值后显示，但我认为从第一个框中删除 onkeyup 会做到这一点。谢谢你的帮助以上是关于如果 2 个字段的值相等，使用 Javascript 如何显示图像？的主要内容，如果未能解决你的问题，请参考以下文章
如何按字段对文档进行分组并使用带有 CouchDB 视图的自定义 reduce 函数列出不相等的值