Question

这是JS代码：

function flag(){	
    document.getElementById("f1").value = "country1";
    document.getElementById("f1").value = "country2";
}

function clean(){
    document.getElementById("country1").value = "";
    document.getElementById("country2").value = "";
}

HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Flag name</title>
  <script src="flag.js"></script>
  <script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
  <link rel="stylesheet" text="text/css" href="flag.css">
</head>
<body>
  <img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
  <img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
  <form action="#" method="GET">
    <input type="text" name="Flag1" id="f1">
    <input type="text" name="Flag2" id="f2">
  </form>
</body>
</html>

当鼠标悬停在国家/地区标志的图像上方时，如何在单独的文本框中获取结果。

我只希望有鼠标的输出。

Answer 1

onMouseOver

function flag(id){	
	document.getElementById("f1").value = id;
}

function clean(){
    document.getElementById("country1").value = "";
    document.getElementById("country2").value = "";
}
HTML code

<!DOCTYPE html>
<html>
<head>
	<title>Flag name</title>
	<script src = "flag.js"></script>
	<script src = "C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
	<link rel = "stylesheet" text = "text/css" href = "flag.css">
</head>	
<body>
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag1.png" id = "flag1" onmouseout = "clean()">
<img onmouseover="flag(this.id))" src = "C:\Users\DELL\Desktop\flag2.png" id = "flag2" onmouseout = "clean()">
<form action = "#" method = "GET">
	<input type = "text" name = "Flag1" id = "f1">
	<input type = "text" name = "Flag2" id = "f2">
</form>
</body>
</html> onmouseover="bigImg(this)"

Answer 2

您需要在event和this事件

中传递onmouseover或onmouseout

您可以使用document.querySelector()查找文本字段，并在onmouseover / onmouseout内设置值
您可以使用getAttribute()方法获取目标属性值。

演示

function flag(tag) {
  document.querySelector(`[name=${tag.id}]`).value = tag.getAttribute('value');
}

function clean(tag) {
  document.querySelector(`[name=${tag.id}]`).value = '';
}

<img src="C:\Users\DELL\Desktop\flag1.png" value="Country 1" id="flag1" onmouseover="flag(this)" onmouseout="clean(this)">
<img src="C:\Users\DELL\Desktop\flag2.png" value="Country 2" id="flag2" onmouseover="flag(this)" onmouseout="clean(this)">
<form action="#" method="GET">
  <input type="text" name="flag1">
  <input type="text" name="flag2">
</form>

Answer 3

您的项目结构如何？

flag.js必须与index.html位于同一文件夹中。还可以在body的末尾链接您的JavaScript脚本。

然后您在使用document.getElementById时遇到了一些错误，您使用了错误的id。

function flag(){	
	document.getElementById("f1").value = "country1";
	document.getElementById("f2").value = "country2";
}

function clean(){
    document.getElementById("f1").value = "";
    document.getElementById("f2").value = "";
}

<!DOCTYPE html>
<html>

<head>
    <title>Flag name</title>

    <link rel="stylesheet" text="text/css" href="flag.css">
</head>

<body>
    <img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag()" onmouseout="clean()">
    <img src="C:\Users\DELL\Desktop\flag2.png" id="flag2" onmouseover="flag()" onmouseout="clean()">
    <form action="#" method="GET">
        <input type="text" name="Flag1" id="f1">
        <input type="text" name="Flag2" id="f2">
    </form>
    <script src="flag.js"></script>
    <script src="C:\Users\DELL\Desktop\jq\jquery.3.js"></script>
</body>

</html>

Answer 4

您可以使用this.id之类的参数o onmouseover =“ flag（）”

<img src="C:\Users\DELL\Desktop\flag1.png" id="flag1" onmouseover="flag(this.id)" onmouseout = "clean()">

，然后输入是否要输入值

if (parameter == flag'){ put one flag }else{ put the other flag }

Answer 5

您好，欢迎来到Stackoverflow，我认为这对您来说可能是更通用的解决方案：

function flag(element) {
  document.getElementById(element.getAttribute('data-target')).value = element.id;
}

function clean(element) {
  document.getElementById(element.getAttribute('data-target')).value = ''
}

img {
  width: 150px;
}

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country1" data-target="f1" onMouseOver="flag(this)" onMouseOut="clean(this)">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" id="country2" data-target="f2" onMouseOver="flag(this)" onMouseOut="clean(this)">
<form action="#" method="GET">
  <input type="text" name="Flag1" id="f1">
  <input type="text" name="Flag2" id="f2">
</form>

Answer 6

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
      $("#flag1").mouseover(function() {
        $("#f1").val("country1");
      });

        $("#flag1").mouseleave(function() {
        $("#f1").val("");
      });

       $("#flag2").mouseover(function() {
        $("#f2").val("country2");
      });
      
        $("#flag2").mouseleave(function() {
        $("#f2").val("");
      });
  });
</script>

<!DOCTYPE html>
<html>
<head>
  <title>Flag name</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <img src="images/banner1.png" id="flag1">
  <img src="images/mobile.png" id="flag2">
  <form action="#" method="GET">
    <input type="text" name="Flag1" id="f1">
    <input type="text" name="Flag2" id="f2">
  </form>
</body>
</html>

如何在文本框中仅回答鼠标所在的图像？

6 个答案: