javascript - 使用 javascript 显示时隐藏 div 出现错误 - Vanilla Javascript

Question

我正在开发一个支持多语言的网站。

我有一些具有多种语言的相同内容的 div，并且我根据用户客户端的语言显示内容。

一切正常，但我收到一条错误消息

Uncaught TypeError: Cannot read property 'style' of null at mywebsite.html

错误指向显示的case。

如何消除该错误？

var language = navigator.language || navigator.languages[0];
console.log(language);
var languageFistTwo = language.substr(0,2); // To only keep the first 2 characters.
console.log(languageFistTwo);

switch (languageFistTwo) {
    case "sl":
        document.getElementById("sl").style.display="inline-block";
        break;  
    case "en":
        document.getElementById("en").style.display="inline-block";
        break;
    case "de":
        document.getElementById("de").style.display="inline-block";
        break;
    case "it":
        document.getElementById("it").style.display="inline-block";
        break;
    case "hr":
        document.getElementById("hr").style.display="inline-block";
        break;
    case "ru":
        document.getElementById("ru").style.display="inline-block";
        break;
    default:
        document.getElementById("en").style.display="inline-block";
}

#sl {
    display: none;
}

#en {
    display: none;
}

#de {
    display: none;
}

#it {
    display: none;
}

#hr {
    display: none;
}

#ru {
    display: none;
}

<div id="sl">
Zdravo
</div>

<div id="en">
Hello
</div>

<div id="de">
Gutten Tag
</div>

Answer 1

Uncaught TypeError: Cannot read property 'style' of null at mywebsite.html

您的其中一个 document.getElementById 语句返回 null。所以它无法读取/更新样式。

检查您是否拥有所有元素并且 ID 是否正确。

您还可以添加 jquery ready function (或等效的)以确保在尝试访问 DOM 之前所有内容都已加载

$( document ).ready(function() {
    console.log( "ready!" );
});

<小时/>

为了确保正确处理错误，您应该在操作元素之前检查该元素是否存在

var element = document.getElementById("myElement")
if (element) {
  element.style.display="inline-block";
}