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

Question

我想让我的用户为我正在制作的主页选择一个搜索引擎。问题是如果他们选择了一个并想回到另一个 - 结果是一样的

我已经尝试过 if then 语句，但如果用户选择不同的东西，它会保持不变。

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。

标签： javascripthtml

Answer 1

问题 1

看线：

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

您已经通过该.value属性获取了它的价值。

然后，在你的if陈述中，你有：

if (se.value = 'ddg')

您正在使用.value再次。但是，这一次，不是 的值，input#se而是字符串值的“值”属性input#se。中没有.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");
}

或者

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')

注意单=号。单个“=”符号用于赋值，而不是用于比较。所以最后一个if总是返回true，所以你的用户总是使用谷歌搜索而不是 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>