Question

我在HTML / PHP中有一个不同区域的图像。当我点击其中一个区域时，我希望上面的输入字段发生变化。我怎么做？试图使用普通的$变量，但我也没办法。

我是HTML新手。

提前致谢！

<input type="text" name="position" size="10" value="">

<img style="margin: 50px 500px" src="pic.jpg" width="500" height="200" alt=":("
usemap="#cabmap" />

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" *something here mby?* />



<html>
<head>
<title>Pos</title>
</head>

<body>

<form method="post" action="process.php">
<fieldset>
<legend><strong>ChosePos</strong></Legend>

<td style="padding-left: 40px"><b>Position</b></td>
<input id="position" type="text" name="position" size="10" value="Hellope"</input>
<br />
<img src="pic.jpg" width="500" height="200" alt="Position map" usemap="#map" />
<map name="map">
  <area shape="rect" coords="0,0,82,126" alt="CA1" onclick="javascript:simply();" />
  <script type="text/javascript">
    function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  </script>

  </map>


</fieldset>

<input style="pading-top: 20px" type="submit" value="Send report" />



</form>
</body>
</html>

现在我已经走到了这一步，但是当我点击该区域时却没有发生......

我不知道什么是错的。 Plz帮助我。

Answer 1

是的，您可以使用外部JavaScript库 jQuery ：

执行此操作

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="$('#position').val('Hello')"/>

或者您可以使用普通的 JavaScript：

执行此操作

<map name="cabmap">
<area shape="rect" coords="20,0,82,126" alt="Sun" onclick="javascript:simply();"/>
<script type="text/javascript">
function simply(){
 var box = document.getElementById("position");
 box.value="Hello"; 
}    
</script>

还要记住在文本框中添加id属性。

Answer 2

更新 - 如果仍然将其标记为“正确”答案...

我已经尝试向OP解释我的答案是基于他们在实现user1474090建议的更改时引入的错误。因此，他们应该将user1474090的答案标记为“正确的”......并且不这个答案。

原始答案

在回复更新的问题时，您会遇到一些语法错误。

首先，您的<input id="position"格式错误，因此请更改...

<input id="position" type="text" name="position" size="10" value="Hellope"</input>

进入以下两行的一个 ......

<input id="position" type="text" name="position" size="10" value="Hellope"></input>
<input id="position" type="text" name="position" size="10" value="Hellope"/>

其次，您的JavaScript函数没有紧密支撑}，因此请更改...

<script type="text/javascript">
  function simply(){
  var box = document.getElementById("position");
  box.value="Hello";
</script>

要...

<script type="text/javascript">
  function simply(){
    var box = document.getElementById("position");
    box.value="Hello";
  }
</script>

我还建议您将<script>块移到页面的<head>部分，而不是<body>的一部分。这对于它的工作并不重要，但它是在页面中使用脚本的首选方式。

我可以彻底推荐FireBug for Firefox或使用Chrome和IE8 / 9中的开发者组件（两者都是F12）。这些很快就会让你发现这样的问题。

单击某个区域时更改输入值

2 个答案: