Question

我有一个表单在php中的for循环中显示一个输入字段。这是一个日期字段。因此，如果用户点击日期字段，我希望它自动输入今天的日期。由于我不知道javascript，我所遇到的问题是我的输入字段在php中的名称每次都在for循环中更改为myText1，myText2等，如何在javascript中更改它？（例如document.getElementById（“myText1”），document.getElementById（“myText2”）

表单字段

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction()"/></font></td>';
}

的Javascript

<script>
function myFunction() {
    document.getElementById("myText").value = "Johnny Bravo";
}
</script>

Answer 1

您将对元素的引用传递给函数。在onclick中，您的引用为this，因此：

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';
    // >>-----------------------------------------------------------------------------------------------------------------------^^^^
}

然后

function myFunction(element) {
    element.value = "Johnny Bravo";
}

Answer 2

假设您应该避免定义内联事件处理程序并将服务器端代码与标记混合，您可以将this参数传递给您在click事件中调用的函数

...onclick="myFunction(this)"

然后将其用作函数内的参数

<script>
function myFunction(t) {
    t.value = "Johnny Bravo";
}
</script>

Answer 3

您需要在myFunction()

中传递ID

echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';

<script>
function myFunction(uid) {
    document.getElementById(uid).value = "Johnny Bravo";
}
</script>

Answer 4

您可以使用此

绑定相同的输入

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';
}

<强>脚本

<script>
function myFunction(obj) {
        obj.value = "Johnny Bravo";
}
</script>

Answer 5

ich更愿意为您想要通过焦点更改的每个输入元素设置一个类，例如并绑定这些类型的事件。

<table>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
</table>

和javascript代码

var elements = document.getElementsByClassName('change_js')

for (var i = 0, len=elements.length;i<len;i++) {
  elements[i].addEventListener('focus',function(){
    this.value="Johnny Bravo";
  })

}

工作示例：http://jsfiddle.net/19uqca7z/

有关javascript代码的详细信息：

https://developer.mozilla.org/de/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 6

在javascript中使用以下代码

<script>
function myFunction() {
    this.value = "Johnny Bravo";
}
</script>

现在你的函数独立于你在PHP代码中给出的内容，this变量将始终引用被单击的元素

javascript更改id元素的名称

6 个答案: