使用单选将文本复制到字段中

Question

我想使用 CSS、HTML 和 JavaScript 创建以下内容

Course1 //下拉选择// …… Course2 //下拉选择// ...... 优胜者 （无线电检查课程 1）或（无线电单击课程 2） //根据选中的 Radio 从 Course1 或 Course2 自动填充//

但我的下拉选择和单选选择相互妨碍。

当我从收音机中获得相同的“winnerselected”名称时，收音机工作正常，但从 course1 或 course2 复制不起作用。

也许有人在其他地方创建了这样的代码并且知道如何绕过它？

任何帮助将不胜感激。

代码如下：

    <!--Make sure the form has the autocomplete function switched off:-->
    <form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
    Course 1
    <input id="myInput" type="text" name="golfcoursename1" placeholder="Golf 
    Course">
    <form autocomplete="off" action="/action_page.php">
    <div class="autocomplete" style="width:300px;">
    Course 2
    <input id="myInput1" type="text" name="golfcoursename2" placeholder="Golf 
    Course">
    </div>
    <p>
    WINNER
    <p>
    <input type="radio" id="Course1" name="winnerselected" value="Course1" 
    onclick="FillWinner(this.form)">
    <label for="Course1">Course 1</label>  
    <input type="radio" id="Course2" name="winnerselected" value="Course2" 
    onclick="FillWinner2(this.form)">
    <label for="Course2">Course 2</label><br>
    <input type="text" id="winner" name="Winner" placeholder="Winner">
        <p>
    </p>  
    <input type="submit">
    </form>

    <script>
    function FillWinner(f) {
    if(f.winnerselected.checked == true) {
    f.winner.value = f.golfcoursename1.value;
    if(f.winnerselected.checked == true) 
    f.winner.value = f.golfcoursename2.value;
    }}
    </script>

Answer 1

首先，您的 HTML 无效，因为您有第二个 form，没有结束标记，嵌套在第一个中。此外，虽然不关闭 p 元素是合法的，但为了清楚起见，您确实应该这样做。

接下来，从您的 HTML 中删除内联样式和内联 JavaScript。它只会使代码混乱，导致冗余，并且更难阅读和维护。而是将您的工作分解为 HTML、CSS 和 JavaScript 部分。

尚不清楚您到底想要什么，但我的猜测是，无论单击哪个单选按钮，都应该决定哪个文本框值成为赢家。基于此，请参阅下面的内联 cmets 以了解代码的工作原理。

.autocomplete { width:300px; }

<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
  <div class="courses">
    <div class="autocomplete">
      Course 1 <input id="myInput" name="golfcoursename1" placeholder="Golf Course">
    </div>
    <div class="autocomplete">
      Course 2 <input id="myInput1" name="golfcoursename2" placeholder="Golf Course">
    </div>
  </div>
  <p>WINNER</p>
  <p id="radioContainer">
    <input type="radio" id="Course1" name="winnerselected" value="Course1">
    <label for="Course1">Course 1</label>  
    <input type="radio" id="Course2" name="winnerselected" value="Course2">
    <label for="Course2">Course 2</label><br>
    <input type="text" id="winner" name="Winner" placeholder="Winner">
  </p>  
  <input type="submit">
</form>

<script>
  // Don't use inline HTML event attributes like onclick.
  // Separate your JavaScript from your HTML
  
  // Get references to the element(s) you'll need to work with
  
  // Get all the elements that have a name attribute that starts with "golfcoursename"
  const courseNames = document.querySelectorAll("[name^='golfcoursename']");
  
  // Get all the elements that have a name attribute that is exactly "winnerselected"
  const radioButtons = document.querySelectorAll("[name='winnerselected']");
  const winner = document.getElementById("winner");
  
  // Here's how to set up events in JS
  const radCont = document.getElementById("radioContainer").addEventListener("click", fillWinner);
  
  function fillWinner(event) {
    // Look at the radiobuttons collection and get the index of the selected radio button from it.
    const indexOfTextbox = Array.from(radioButtons).indexOf(event.target);
   
    // Set the value of the winner textbox to textbox with the same index as the clicked radio button
    winner.value = courseNames[indexOfTextbox].value;
  }
</script>