Question

我尝试添加一个功能，您可以从select元素中选择衬衫的颜色，并在按下按钮时将其添加到textarea。

此外，如果有人可以通过一组单选按钮提供相同的建议，那将会有很大帮助。

的JavaScript

function addShirt() {
    buildStr += document.shirtInfo.color.value;
}

HTML

<form name="shirtInfo">
    <h1>Shirts</h1>
    <select name="color">
        <option>White Shirt</option>
        <option>Black Shirt</option>
        <option>Grey Shirt</option>
    </select>
    <input type="button" name="complete" value="Submit"   onclick="addShirt()"/>

    <textarea name="receipt" rows="10" cols="15"></textarea>

Answer 1

请在HTML中使用ID。任何试图访问你的DOM的人都会发现如果他们只能调用一个ID就可以更容易修改。

所以，你真正想做的就是增加textarea的价值。

  // First, define the type of variable that you want (I chose an array)
  //  You don't have to, but it's easier for me to iterate over
var buildstr = [];

  //  I'm adding this event listener on the Javascript side 
  //  so it doesn't require you changing the HTML to modify it
document.shirtInfo.complete.addEventListener("click", function(e) {
      //  Take the value of the dropdown and add it to the end of the array
    buildstr.push(document.shirtInfo.color.value);
      //  Then overwrite the value of the textarea with the array
    document.shirtInfo.receipt.value = buildstr;
})

Answer 2

您可以使用getElementsByName javascript函数在javascript中访问textarea。在javascript中访问代表textarea的DOM元素后，您可以使用innerHTML属性更改其内容。

function addShirt() { 
    document.getElementsByName("receipt")[0].innerHTML += document.shirtInfo.color.value; 
}

您应该注意getElementsByName返回一个数组。这就是你必须获取该数组的第一个元素的原因。在向textarea添加唯一getElementById属性后，您还可以使用id，它只返回一个元素。

为了使结果更清晰，您可能希望在添加的每种颜色后添加新行：

        document.getElementsByName("receipt")[0].innerHTML += document.shirtInfo.color.value + "\n";

如何将select元素的值放入textarea？

2 个答案: