I необходимо иметь ряд кнопок, которые при выборе одной из них назначают адрес этой кнопке значению. Проблема в том, что он делает это только один раз & Amp ; Я не могу найти способ это исправить. Если вы запустите код, который вы увидите вначале, я присваиваю значение = «Сиэтл, Вашингтон», затем, когда вы нажимаете одну из кнопок, я хочу, чтобы она изменила его на новое значение.

Я добавил функцию «ClearFields», так как думал, что это решит проблему.

<!-- Clear the address fields -->
<script>
   function ClearFields() {
     document.getElementById("address1").value = "";
     document.getElementById("address").value = "";
   }
</script>

<!-- Copy the Address info from WindowPane -->
<script>
   function AddressTextBox() {
     document.getElementById('address').value = 
     document.getElementById('address1').value;
   }
</script>


<div>
   <Button onclick="AddressTextBox();" id="address1" data-toggle="modal"
      data-target="#Business-Signup" type="text" value="12080 SW Myslony 
      St., Tualatin, OR">
      Business Information - Tualatin, Or
   </button>

   <Button onclick="AddressTextBox();" id="address1" data-toggle="modal" 
      data-target="#Business-Signup" type="text" value="13009 SE Jennifer 
      St, Clackamas, OR">
      Business Information - Clakamas, Or
   </button>
</div>

<div class="officeaddress">
  <ul>
     <li>
       <br />
       <label class="buslabel" for="Name">Address:
          <strong><input id="address" tabindex="6" style="margin-left:
             5px; border: none; padding: 0;" type="text"
             class="busaddinput" placeholder="Street Address" size="25"
             name="streetaddress" maxlength="34" value="Seattle, WA"          
             required>
          </strong>
        </label>
    </li>
    <li>
      <label class="buslabel" for="Name">City:
        <strong><input tabindex="7" style="margin-left: 32px; border:
           none; padding: 0;" type="text" class="busaddinput" 
           placeholder="City" name="city" size="20" maxlength="30"
           value="Puyallup" required></strong>
      </label>
   </li>
   <li>
     <label class="buslabel" for="Name">State:
        <strong><input type="text" tabindex="8" style="margin-left: 24px;
        border: none; padding: 0;" class="busaddinput" 
        placeholder="State" name="state" size="10" maxlength="10"
        value="WA" required></strong>
     </label>
    </li>
   </ul>
 </div>

У вас есть два элемента кнопки с одинаковым id="address1".

document.getElementById('address1').value, возвращает только первый элемент, соответствующий идентификатору, поэтому он получает значение только с первой кнопки. Чтобы извлечь значение из второй кнопки, вам нужно присвоить второй кнопке уникальный идентификатор, такой как «address2», и использовать document.getElementById('address2').value для доступа к нему.

Лучшим способом справиться с этим может быть ссылка на элемент clicked в вашей функции AddressTextBox. Тогда вам даже не нужно полагаться на идентификаторы для ваших кнопок, только для поля, которое вы хотите установить:

  function AddressTextBox(element) {
     document.getElementById('address').value = 
     element.value;
  }
<div>
   <Button onclick="AddressTextBox(this);" data-toggle="modal"
      data-target="#Business-Signup" type="text" value="12080 SW Myslony 
      St., Tualatin, OR">
      Business Information - Tualatin, Or
   </button>

   <Button onclick="AddressTextBox(this);" data-toggle="modal" 
      data-target="#Business-Signup" type="text" value="13009 SE Jennifer 
      St, Clackamas, OR">
      Business Information - Clakamas, Or
   </button>
</div>

<div class="officeaddress">
  <ul>
     <li>
       <br />
       <label class="buslabel" for="Name">Address:
          <strong><input id="address" tabindex="6" style="margin-left:
             5px; border: none; padding: 0;" type="text"
             class="busaddinput" placeholder="Street Address" size="25"
             name="streetaddress" maxlength="34" value="Seattle, WA"          
             required>
          </strong>
        </label>
    </li>
    <li>
      <label class="buslabel" for="Name">City:
        <strong><input tabindex="7" style="margin-left: 32px; border:
           none; padding: 0;" type="text" class="busaddinput" 
           placeholder="City" name="city" size="20" maxlength="30"
           value="Puyallup" required></strong>
      </label>
   </li>
   <li>
     <label class="buslabel" for="Name">State:
        <strong><input type="text" tabindex="8" style="margin-left: 24px;
        border: none; padding: 0;" class="busaddinput" 
        placeholder="State" name="state" size="10" maxlength="10"
        value="WA" required></strong>
     </label>
    </li>
   </ul>
 </div>

В приведенном выше примере я включил параметр с именем element в функцию AddressTextBox. Затем я использовал ключевое слово this в событии onclick каждой кнопки, чтобы вызвать AddressTextBox () с элементом кнопки, по которому щелкнули.

Вы можете сделать это по классу вместо ID. Надеюсь, это поможет.

$(document).ready(function(){
 
 for(var i=0; i<4;i  ){
 var button= "<button class='btn'>Click me to hide paragraphs" i "</button>";
 		$("body").append(button);
 }
 
 $(".btn").on('click',function(){ 
  $(".target").text($(this).text());
 });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
 

 

<p class="target">i have to chnage</p>

</body>
</html>