javascript更改id元素的名稱

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變量將始終引用已單擊的元素