如何將每個標題屬性轉換為輸入標簽的值？

Question

我試圖將每個title屬性捕獲到輸入標記的值中，但是我嘗試了很多方法，但是所有嘗試都失敗了，甚至嘗試使用for（）循環。

例如， 這是我的代碼，然后添加javascript

<div class="all">
  <div class="myOtherClass">
    <a class="getTitle test" href="#" Title="i want grab this title">click me to change</a>
  </div>
  <div class="myOtherClass">
    <a class="getTitle test" href="#" Title="i want grab this too">click me to change</a>
  </div>
  <div class="myOtherClass">
    <a class="getTitle test" href="#" Title="same at 2 other">click me to change</a>
  </div>
  <div class="Otherclass">
    <input class="myInput" type="button" value=""/>
  </div>
</div>

---

這就是我試圖做的

let getTitle = document.querySelectorAll('.getTitle').forEach((f) => {
    f.addEventListener('click', function() {
     document.querySelectorAll('.all').forEach(item =>{

      let button = item.querySelector('.getinput')          
      let a = item.querySelectorAll('.test');
       for(let i=0; i < a.length; i++){
          let atitle = a[i];
          button.value = atitle.title; 
        }
       })
      })
     }) 

---

這是我希望我的代碼在添加javascript之后所做的

當我單擊第一個標簽時，將返回輸入值

<input class="myInput" type="button" value="i want grab this title"/>

---

當我單擊第二個標簽時，它將返回此值

<input class="myInput" type="button" value="i want grab this too"/>

---

但是我這樣的結果

當我單擊第一個標簽時，返回的輸入值是

<input class="myInput" type="button" value="i want grab this title"/>

---

當我單擊第二個標簽時，返回第一個標簽的相同值

<input class="myInput" type="button" value="i want grab this title"/>

有沒有辦法解決這個解決方案？

Answer 1

您可以在每個錨標記上使用事件偵聽器，並通過ID設置輸入的值，您需要相應地對其進行更改：

 const elements = document.getElementsByClassName('getTitle') const input = document.getElementById('[change_this]') Array.from(elements).forEach(a => { a.addEventListener('click', (el) => { input.value = el.target.title }) }) 

 <div class="all"> <div class="myOtherClass"> <a class="getTitle test" Title="i want grab this title">click me to change</a> </div> <div class="myOtherClass"> <a class="getTitle test" Title="i want grab this too">click me to change</a> </div> <div class="myOtherClass"> <a class="getTitle test" Title="same at 2 other">click me to change</a> </div> <div class="Otherclass"> <input id="[change_this]" class="myInput" type="button" value="" /> </div> 

Answer 2

從可以理解的內容到您的工作：

 document.querySelectorAll('.getTitle').forEach( Z_elm => { Z_elm.addEventListener('click', function () { document.querySelector('.myInput').value = this.title; // or : (in your real code) // document.querySelector('#myModal .getinput').value = this.title; }) }) 

 a {cursor: pointer;} 

 <div class="all"> <div class="myOtherClass"> <a class="getTitle" Title="i want grab this title">click me to change</a> </div> <div class="myOtherClass"> <a class="getTitle" Title="i want grab this too">click me to change</a> </div> <div class="myOtherClass"> <a class="getTitle" Title="same at 2 other">click me to change</a> </div> <div class="Otherclass"> <input class="myInput" type="button" value=""/> </div> </div>