Question

我编写了JavaScript代码，通过onclick事件在文本框中显示特定的div标记。

如果我使用表单标签，则不会通过onclick在textfield中显示div标签ID。如果我删除表单标记，它可以正常工作。为什么呢？

来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function MMID(clicked_id) {
    document.getElementById('MMID').value = clicked_id;
}
</script>
</head>
<body>
<form action="" method="post">
    <div id="28" onclick="MMID(this.id)">Hello Ram</div>
    <input name="MMID" type="text" id="MMID" />
</form>
</body>
</html>

Answer 1

使用以下代码：

<div id="28" class="mycls">Hello Ram</div>

$('.mycls').click(function(){
    clicked_id = $(this).attr('id');
    $('#MMID').val(clicked_id);
});

您需要在页面上加载jquery以便在代码之上使用，但它非常简单。

如果有任何疑问，请告诉我。

谢谢！

Answer 2

应更改函数名称和ID名称。检查控制台会出错。

 <script type="text/javascript">
 function MMID_FUNC(clicked_id)
 {
   document.getElementById('MMID').value=clicked_id;

 }
</script>

<div id="28" onclick="MMID_FUNC(this.id)">Hello Ram</div>
   <input name="MMID" type="text" id="MMID" />

Answer 3

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function MMID(clicked_id)
{
document.getElementById('MMID').value=clicked_id;

}
</script>
</head>
<body>
<form action="" method="post">
<div id="28" onclick="javasxcript: MMID(this.innerHTML)">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />
</form>
</body>
</html>

Answer 4

试试这个：

<div id="28" onClick="MMID(this);">Hello Ram</div>
<input name="MMID" type="text" id="MMID" />

使用Javascript：

function MMID(ele)
{
  document.getElementById('MMID').value= ele.id;
}

Answer 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
        function mmid(clicked_id) {
            document.getElementById('MMID').value = clicked_id;
        }
    </script>
</head>
<body>
<form action="" method="post">
    <div id="28" onclick="mmid(this.id)">Hello Ram</div>
    <input name="MMID" type="text" id="MMID" value="" />
</form>
</body>
</html>

Answer 6

不要在表单标记中为函数和div id指定相同的名称。 Javascript认为MMID是一个对象，而不是一个函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function gets(clicked_id)
            {
                document.getElementById('MMID').value=clicked_id;

            }
        </script>
    </head>
    <body>
        <form action="tests.php" method="post">
            <div id="28" onclick="gets(this.id)">Hello Ram</div>
            <input name="MMID" type="text" id="MMID" />
        </form>
    </body>
</html>

为什么此代码在使用表单标记时会导致错误？

6 个答案: