Question

当用户点击某个区域时，如何更改<p>？

我有<img>，它有矩形区域。 <img>下面是<p>。根据点击的区域，我希望文本本身发生变化，例如从“改变我”到“我已经改变”。

我想在用户点击元素时更改段落文本。

谢谢!! ：d

Answer 1

让我们假设你有这个HTML段落：

<p id="paragraph">change me</p>
<button id="btn" onclick="changeP()">Click here to change</button>

您需要将Javascript函数（changeP）设为：

<script>
function changeP(){
document.getElementById("paragraph").innerHTML = "I have changed";
}
</script>

Answer 2

您可以使用'map'标记内的<area>标记。您可以查看Oqhax发布的链接。然后，您可以使map标记调用一个函数（通过用onclick替换为href标记）。然后，在javascript文件中，您可以使用该函数将文本的innerHTML更改为您想要的任何内容。

Answer 3

其他例子：

＆＃13;

function rename() {
$('#name').text("Any");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег AREA</title>
  <style type="text/css">
   #title {
    line-height: 0;
   }
   #title img {
    border: none;
   }
  </style>
 </head>
 <body> 
 <div id="title"><br>
  <img src="http://htmlbook.ru/example/images/navigate.png" width="640" height="30" 
                usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" onclick="rename()" alt="Информация">
  </map></p>
  <p id="name">Mike</p>
 </body>
</html>

＆＃13;

使用点击功能。例如：

＆＃13;

$('#rename').click(function() {
 $('#name').text('Anna');
 }
)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/" title="name" alt="name" id="rename" />
<p id="name">Mike</p>

＆＃13;

我希望这是你需要的吗？

如何根据用户操作更改文本？

3 个答案: