使用Javascript如果2个字段的值相等，我如何显示图像？
[英]Using Javascript how can I display an image if the value of 2 fields are equal?
问题描述
I have a form that I want to be able to compare the numbers entered in two input boxes and if they match then I want to display a thumbs up image if they don't I want to display a thumbs down image. 
我有一个表格，我希望能够比较在两个输入框中输入的数字，如果它们匹配，那么我想显示一个竖起大拇指的图像，如果他们不，我想显示一个拇指向下的图像。 I'm attempting to use javascript to do this but I'm not sure how to get the images to display. 我正在尝试使用javascript来执行此操作，但我不确定如何显示图像。 I've searched this topic but am unable to find anything that explains how to display an image using javascript in the manner I need to do it. 我已经搜索了这个主题，但我无法找到任何解释如何使用javascript以我需要的方式显示图像。 Here is what I have for my code so far, and I'm not even sure if what I have is even correct, 到目前为止，这是我的代码，我甚至不确定我的代码是否正确，
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
This is my first attempt at javascript so I'm not sure if I'm on the right track or not? 这是我对javascript的第一次尝试，所以我不确定我是否在正确的轨道上？
so this is what I have now as given from answers below 所以这就是我现在从下面的答案给出的
<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>
but this always displays a thumbs down image then adds the thumbs up image if the inputs match showing both the thumbs up and thumbs down. 但是如果输入匹配同时显示拇指向上和拇指向下，则总是显示向下的图像然后添加竖起图像。 I don't want there to be an image unless the values match or don't match but only after a value is input. 我不希望有一个图像，除非值匹配或不匹配，但只有在输入值后。
5 个解决方案
解决方案1
2 已采纳 2013-07-26 11:21:55
clean and easy way with js is following... js干净简单的方法如下......
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>
解决方案2
0 2013-07-26 11:05:17
Create an empty div with id img1 and use this code 创建一个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">';
}
解决方案3
0 2013-07-26 11:09:38
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";
}
解决方案4
0 2013-07-26 11:10:03
Here is an example how can you match numbers. 这是一个如何匹配数字的示例。
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';
解决方案5
0 2013-07-26 11:11:14
If you are new to JavaScript, you shall definitely use jQuery. 如果您不熟悉JavaScript，那么一定要使用jQuery。
Then the code would be: 那么代码将是：
if ( $("#scan_out").val() === $("#scan_in").val() ) {
$("#scan_icon").html('<img src="thumbs_up.png">');
} else {
$("#scan_icon").html('<img src="thumbs_down.png">');
}
You should place <div id="scan_icon"></div> where you want the icon to appear. 您应该将<div id="scan_icon"></div>放在要显示图标的位置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.