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

Question

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

课程1//下拉选择//.... 课程2//下拉选择//..... 胜利者 (无线电检查课程1)或(电台点击进入课程 2) 从课程 1 或课程 2 自动填充，具体取决于选中的无线电//

但是我的下拉选择和无线电选择相互阻碍。

当我从收音机中获得相同的"获胜者选择"名称时，收音机可以工作，但从课程 1 或课程 2 复制不起作用。

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

任何帮助将不胜感激。

代码如下：

<!--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 部分。

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

.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>