我的函数内部不断出现错误，我不知道为什么？答案

【问题标题】：I keep getting an error on my inside my function and I have no idea why?我的函数内部不断出现错误，我不知道为什么？
【发布时间】：2016-10-26 00:37:39
【问题描述】：

我的表单上有一个下拉字段。当我从下拉列表中选择一个值时，它会立即将焦点重置到表单的顶部。

为了更清楚，我在屏幕顶部有一个下拉菜单和几个输入字段。用户必须向下滚动到实际的下拉字段才能选择它。一旦他们选择了值，页面就会滚动回顶部。

一旦用户从下拉列表中选择了一个值，如何保持用户在表单上选择的位置？ [注意：它不会在堆栈溢出时显示，您必须复制并粘贴代码并在您自己的浏览器上尝试]。

我知道这与 HTML 中的代码有关。

document.getElementById("locale").options[value].selected;
window.location.hash="country-select";

因为我不断收到错误消息： 未捕获的类型错误：无法读取未定义的“已选择”属性

目前为止

    // creates the page dynamically
    function GetSelectedItem(){
          var option = document.getElementById("locale").value;
    }

<!doctype html>  
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyWebsite</title>
    <link rel="stylesheet" href="languageswitcher.css">
    <script>

		document.getElementById("locale").addEventListener('change', function(event) {
			var selected = event.target.options[ event.target.selectedIndex ].value 
			console.log(selected);
			window.location.hash = selected; 
		});
    </script>
  </head>

  <body>

    <header>

      <div id="country-select">
        <form action="" method = "get">
          <select id= "locale" name="locale">
            <option value="en_US">English(US)</option>
            <option value="en_GB">English(UK)</option>
            <option value="bg_BG">Bulgarian</option>
            <option value="cs_CS">Czech</option>
            <option value="da_DK">Danish</option>
            <option value="de_DE">German</option>
            <option value="ek_GR">Greek</option>
            <option value="es_ES">Spanish</option>
            <option value="et_ET">Estonian</option>
            <option value="fi_FI">Finnish</option>
            <option value="fr_FR">French</option>
            <option value="hu_HU">Hungarian</option>
            <option value="it_IT">Italian</option>
            <option value="lt_LT">Lithuanian</option>
            <option value="lv_LV">Latvian</option>
            <option value="nl_NL">Dutch</option>
            <option value="no_NO">Norwegian</option>
            <option value="pl_PL">Polish</option>
            <option value="pt_PT">Portugese</option>
            <option value="ro_RO">Romanian</option>
            <option value="sk_SK">Slovak</option>
            <option value="sl_SL">Slovenian</option>
            <option value="sv_SE">Swedish</option>
          </select>
          <input value="Select" type="submit"/>
        </form>
      </div>
    </header>
    <script src="jquery_1.5.min.js"></script>
    <script src="languageswitcher.js"></script>
  </body>
</html>

感谢大家的帮助，我只是想自学，到目前为止一切顺利，但我已经坚持了大约 2 周，我不知道为什么 .selected 根本不起作用。此外，如果有任何其他有效的方法来执行此代码，例如使用数组，也很高兴知道。再次感谢

【问题讨论】：

使用：selBox.options[selBox.selectedIndex].value 其中 selBox 是您的下拉框（我认为在您的情况下是区域设置）。由于 value 没有 Selected 属性，您会收到错误消息。由于错误，光标失去焦点并默认位于屏幕/页面的顶部。
@TonyDuffill 谢谢托尼，但是，它修复了错误，但它仍然无助于解决我的整体问题。例如，如果我将语言切换为意大利语并点击“提交”，链接会完全改变，但选择框会一直回到英语（美国）

标签： javascript html

【解决方案1】：

如果你给你的选择元素添加一个事件监听器会更容易：

document.getElementById("locale").addEventListener('change', function(event) {
  var selected = event.target.options[ event.target.selectedIndex ].value 
  console.log(selected);
  window.location.hash = selected; 
});

jsFiddle

注意：您不会在 jsfiddle 上看到哈希值的变化，但它会发生变化。查看控制台日志。

编辑： 尝试将您的代码包装在此事件中，等待 DOM 树加载后再执行代码。

document.addEventListener("DOMContentLoaded", function(event) { 

  // creates the page dynamically
  function GetSelectedItem(){
    var option = document.getElementById("locale").value;
  }


  document.getElementById("locale").addEventListener('change', function(event) {
    var selected = event.target.options[ event.target.selectedIndex ].value 
    console.log(selected);
    window.location.hash = selected; 
  });
});

jsFiddle DOM wait

【讨论】：

谢谢安迪，但这样做我得到另一个错误说......未捕获的类型错误：无法读取 null 的属性“addEventListener”
这是因为你在元素退出DOM树之前寻找元素（你需要在它准备好之后执行）或者因为你的<select id= "localte">....之间的空间很小，你能分享更多的吗？请把你的代码放在 jsfiddle 中。
这就是我的全部代码。我所有的 Javascript 代码都在 HTML 文件的标题中。
我更新了我的答案。顺便说一句，您需要遵循某些规则将代码上传到 jsfiddle（将其分开，对于 html，不包括 doctype、head 元素等）
非常感谢安迪！错误不再存在，但我的下拉菜单仍然无法正常工作:(所以我想做的是，如果我在下拉菜单上选择意大利语，它将转到意大利语路径在 url 中，但一旦完成，下拉菜单将切换回我不想要的下拉菜单 [English(US)] 上的第一个项目，我希望它留在意大利语上

【解决方案2】：

有几个问题：

您可以使用 select-case 清除所有这些 if-else 语句。但是，您似乎根本不需要任何代码，因为您可能无需任何代码就可以选择所需的选项。
您在所有选项中添加的title 元素似乎是多余的。由于它们似乎只是表示索引，因此您可以使用 options[] 数组来访问它们。
你从来没有在你的JS代码中设置title的值，所以它总是未定义的。由于标题从未设置，value 也从未设置。因为 options[title] 是未定义的（这是您以粗体提供的错误）。
~~你没有发布 languageswitcher.js 的代码，所以我们不知道里面发生了什么。~~

【讨论】：

谢谢@Rick，但我确实为 languageswitcher.js 发过帖子，这是第一个代码。那个小写函数

【解决方案3】：

除了您当前看到的问题之外，还有几个问题正在发生。

在使用之前似乎没有设置标题变量。需要一个初始值，否则您将收到 Uncaught ReferenceError: title is not defined 错误。
正在分配而不是检查标题变量。您在 if 语句中使用 '=' 而不是 '==' 或 '===' 。这导致第一个 if 块不仅始终为 true，而且还将 title 设置为“0”，将 value 设置为“en_US”。
document.getElementById("locale").options 不会为您提供按其值排序的选项。它们按索引号排序。我建议将该行更改为document.getElementById('locale').value = value

如果您尝试根据所选选项的值设置窗口的哈希值，那么我会选择 andybeli 的答案。如果您不希望在哈希更新时窗口跳转，那么您可以执行此处提供的答案之一：

How can I update window.location.hash without jumping the document?

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

【讨论】：

谢谢@Darknesskight，我尝试了andybeli的回答，但由于某种原因它仍然给了我一个错误......未捕获的TypeError：无法读取null的属性'addEventListener'......我删除了所有标题，因为它们是多余的。
您可能会收到该错误，因为 select 元素在该行 JavaScript 运行之前不存在。您可以将该 JavaScript 块与 HTML 底部的其他 JavaScript 块一起移动，或者将该代码放在 window.onload 函数中。
好的，可以尝试一下，然后将其放入 window.onload 函数中。非常感谢您的帮助！