Question

我正在创建一个表单，我的用户可以在其中从复选框和下拉列表中选择一些选项。

预期结果是随着用户更改选择而动态生成的文本。

它可以工作，但是我一直在获取“[object HTMLSelectElement]”而不是下拉列表中所选选项的值。如何获得实际价值？

<!DOCTYPE html>
<html lang="en" >
    <body>
        <div class="container">
            <select name = "birthyear" id = "from" size="3" >
                <option value="1980" >1980</option>
                <option value="1981">1981</option>
                <option value="1982">1982</option>
            </select>
            <select name = "month" id = "month" size="3" >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <select name="day" id="day" size="3" >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <a id="search-btn" href="#">Search</a>
        </div>
    </body>
</html>

let searchButton = document.getElementById("search-btn");
let searchInput = document.getElementById("from");
let searchInput1= document.getElementById("month"); 
let searchInput2 = document.getElementById("day"); 
let summary = document.getElementById("summary");

searchButton.addEventListener("click", findWeatherDetails); 
searchInput.addEventListener("keyup", enterPressed); 

searchInput1.addEventListener("keyup", enterPressed1); 
searchInput2.addEventListener("keyup", enterPressed2); 

function enterPressed(event) {
  if (event.key === "Enter") {
    findDetails();
  }

}
function enterPressed1(event) {
  if (event.key === "Enter") {
    findDetails();
  }

}
function enterPressed2(event) {
  if (event.key === "Enter") {
    findDetails();
  }

}
function findDetails() {
    let searchLink = "https://www.geniecontents.com/fortune/internal/v1/yearly?birthYear="+searchInput+"&targetYear=2019&targetMonth"
    +searchInput1+"&targetDay="+searchInput2;
   httpRequestAsync(searchLink, theResponse);

 }
function theResponse(response) {
  let jsonObject = JSON.parse(response);
  summary.innerHTML = jsonObject.summary;
}


function httpRequestAsync(url, callback)
{
  console.log("hello");
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = () => { 

        if (httpRequest.readyState == 4 && httpRequest.status == 200)
            callback(httpRequest.responseText); 
    }
    httpRequest.open("GET", url, true); // true for asynchronous 
    httpRequest.send();
}

这是HTTP GET

的结果

GET https://www.geniecontents.com/fortune/internal/v1/yearly?birthYear=[object%20HTMLSelectElement]&targetYear=2019&targetMonth[object%20HTMLSelectElement]&targetDay=[object%20HTMLSelectElement] => 500

Answer 1

您需要使用.value例如。 searchInput1.value

因此，您在findDetails()中的搜索链接应通过以下方式创建：

let searchLink = "https://www.geniecontents.com/fortune/internal/v1/yearly?birthYear=" + 
searchInput.value + 
"&targetYear=2019&targetMonth" + 
searchInput1.value + 
"&targetDay=" + 
searchInput2.value;

Answer 2

实际上，您得到[HTMLElement Object]是因为document.getElementById返回了元素本身（所以是一个HTMLElement对象），并且该元素在转换为字符串时以这种格式表示。

为了获取输入值（<input>，<select>，<textarea>），您必须通过它们的value属性。

检查以下示例：

// Getting HTMLElement objects here.
const select = document.getElementById('mySelect'),
  textInput = document.getElementById('myInputText'),
  numberInput = document.getElementById('myInputNumber'),
  textarea = document.getElementById('myTextarea');
  
// Getting their value here (XXX.value).
select.addEventListener('change', () => (console.log(select.value)));
textInput.addEventListener('keyup', () => (console.log(textInput.value)));
numberInput.addEventListener('keyup', () => (console.log(numberInput.value)));
textarea.addEventListener('keyup', () => (console.log(textarea.value)));

<select id="mySelect">
  <option value="firstOption">1</option>
  <option value="secondOption">2</option>
</select>

<input type="text" id="myInputText">
<input type="number" id="myInputNumber">

<textarea id="myTextarea"></textarea>

对于您而言，您需要执行以下操作：

function findDetails() {
    let searchLink = "https://www.geniecontents.com/fortune/internal/v1/yearly?birthYear=" + searchInput.value + "&targetYear=2019&targetMonth" 
    + searchInput1.value + "&targetDay=" + searchInput2.value;

   httpRequestAsync(searchLink, theResponse);
}

访问HTMLSelectElement的值

2 个答案: