Question

我想允许我的用户为我创建的主页选择搜索引擎。问题是，如果他们选择其中一个并想返回另一个，则结果是相同的

我尝试过if语句，但是如果用户选择其他内容，它将保持不变。

function search() {
  var se = document.getElementById("se").value;
  var query = document.getElementById("search").value;
  
  if (se.value = "ddg") {
    var searchb4plus = "https://www.duckduckgo.com/?q=" + query
  }
  if (se.value = "google") {
    var searchb4plus = "https://www.google.com/search?q=" + query
  }
  
  var search = searchb4plus.split(' ').join('+');
  window.open(search, "_self");
}

<input id=search placeholder=" Search now!" maxlength=100>

<button onclick=search()></button>

<p style="color:black;">Search Engine:</p>

<select id=se>
  <option value=ddg>DuckDuckGo</option>
  <option value=google>Google</option>
</select>

<br>

<p style="color:black;">These settings don't save.</p>

<br>

<button onclick=hsettings() style="display:none;" id=sbutton>Hide Settings</button>

预期结果是，如果他们首先选择Google，然后想要使用DuckDuckGo，他们只是搜索DuckDuckGo。相反，即使他们选择了DDG，它仍然会使用Google。

Answer 1

问题1

看一行：

var se = document.getElementById('se').value

您已经通过.value属性获得其价值。

然后，在您的if语句中，您将拥有：

if (se.value = 'ddg')

您再次使用.value。但是，这一次，它不是input#se的值，而是input#se字符串值的“ value”属性。 .value中没有String属性，因此未定义。

您应该做的是仅从实际元素中获取.value属性。

function search() {
    var se = document.getElementById("se");
    var query = document.getElementById("search").value;
    if (se.value = "ddg") {var searchb4plus = "https://www.duckduckgo.com/?q=" + query}
    if (se.value = "google") {var searchb4plus = "https://www.google.com/search?q=" + query}
    var search = searchb4plus.split(' ').join('+');
    window.open(search, "_self");
}

OR

function search() {
    var se = document.getElementById("se").value;
    var query = document.getElementById("search").value;
    if (se = "ddg") {var searchb4plus = "https://www.duckduckgo.com/?q=" + query}
    if (se = "google") {var searchb4plus = "https://www.google.com/search?q=" + query}
    var search = searchb4plus.split(' ').join('+');
    window.open(search, "_self");
}

问题2

在您的if语句中，您写道：

if (se.value = 'ddg')

请注意单个=符号。 Single "=" sign is for value assignment, not for comparison。因此，最后一个if将始终返回true，因此您的用户将始终使用Google进行搜索，而不会使用DDG。

您应该这样写：

if (se.value === 'ddg')

工作示例

function search() {
  var se = document.getElementById("se");
  var query = document.getElementById("search").value;
  
  if (se.value === "ddg") {
    var searchb4plus = "https://www.duckduckgo.com/?q=" + query
  }
  if (se.value === "google") {
    var searchb4plus = "https://www.google.com/search?q=" + query
  }
  
  var search = searchb4plus.split(' ').join('+');
  /* Comment this out because can't open tab using SO's code snippet
  window.open(search, "_self");
  */
  console.log(search)
}

<input id=search placeholder=" Search now!" maxlength=100>

<button onclick=search()></button>

<p style="color:black;">Search Engine:</p>

<select id=se>
  <option value=ddg>DuckDuckGo</option>
  <option value=google>Google</option>
</select>

<br>

<p style="color:black;">These settings don't save.</p>

<br>

<button onclick=hsettings() style="display:none;" id=sbutton>Hide Settings</button>

如何修复JS不适应新的HTML输入

1 个答案: