Question

我需要能够具有一系列按钮，当您选择一个按钮时，它会将该按钮的地址分配给该值。问题是它只做一次，我想不出办法解决这个问题。如果运行代码，最初会看到我分配了值=“ Seattle，WA”，然后单击其中一个按钮时，我希望它将其更改为新值。

我添加了一个功能“ 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>

Answer 1

您有两个具有相同id="address1"的按钮元素。

document.getElementById('address1').value仅返回与ID匹配的第一个元素，因此它仅从第一个按钮中检索值。要从第二个按钮检索值，您需要给第二个按钮一个唯一的ID，例如“ address2”，并使用document.getElementById('address2').value来访问它。

处理此问题的更好方法可能是引用AddressTextBox函数中的clicked元素。然后，您甚至不需要依赖ID的按钮，只需依赖要设置的字段即可：

  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>

在上面的示例中，我在AddressTextBox函数中包含了一个名为element的参数。然后，我在每个按钮的onclick事件中使用了this关键字，通过单击的按钮元素来调用AddressTextBox（）。

Answer 2

您可以按课程而不是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>

选择按钮时更改文本

2 个答案: