Я начинающий ученик HTML, и я был самоучкой на своем пути. Это первый веб-сайт, который я когда-либо делал с нуля (используя HTML и CSS и JS). Я просмотрел этот сайт по другим вопросам и ответам, но я столкнулся с проблемой, которую другие ответы не устраняют. Многие из ответов показывают, что «window.onload = function() { JavaScript} "решит проблему, но у меня есть несколько возможных функций на данной странице. Я использую innerHTML для загрузки содержимого тела, в то время как фон и навигация согласованы на веб-странице.getElementById TypeError: «не может установить свойство« innerHTML »из null
У меня есть четыре кнопки с четырьмя различными функциями: «Домашняя страница, О, Видео, Исследования и Разработка», с соответствующими функциями: «load_home(), load_about(), loa . D_media(), и load_research()»
Я его так это выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Script\jquery-ui-1.11.2.custom\jquery-ui.theme.css">
<link language="JavaScript"type="text/css" rel="stylesheet" href="Script\jquery-ui-1.11.2.custom\jquery-ui.css"></link>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\external\jquery\jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="Script\jquery-ui-1.11.2.custom\jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("input[type=submit], a, button")
.button()
.click(function(event) {
event.preventDefault();
});
});
</script>
</head>
<body>
<div class="start"> <!--start refers to the CSS scope I added to the jQuery UI I have added for the buttons in my navigation-->
<nav>
<button onclick="load_home()" class="">Home Page</button>
<button onclick="load_about()" class="">About </button>
<button onclick="load_media()" class="">Videos</button>
<button onclick="load_research()" class="">Research and Development</button>
</nav>
</div>
</body>
<script type="text/javascript">
function load_home() {
document.getElementById("content1").innerHTML='<object type="text/html" data="Home.html"></object>';
}
function load_about() {
document.getElementById("Body").innerHTML='<object type="text/html" data="About Golding Lights.html"></object>';
}
function load_media() {
document.getElementById("Body").innerHTML='<object type="text/html" data="Media.html"></object>';
}
function load_research() {
document.getElementById("Body").innerHTML='<object type="text/html" data="Research and Development.html"></object>';
}
</script>
</html>
Я использовал эту функцию ранее в другом веб-сайте я собирался разработать, и он работал хорошо. Надеюсь, есть некоторые ответы, которые могут мне помочь. Благодарю.
вы можете поместить все функции JS внутри window.onload = функция() {/ * ваши функции здесь * /} причина вы получаете ваше сообщение об ошибке заключается в том, что элементы DOM не существуют в то время, когда вы пытаетесь их редактировать. – ateich
Я не вижу ни одного атрибута ID в вашем HTML - это, вероятно, это :) – tymeJV
не обертывайте свой html в предварительные теги. Мы не можем видеть ваш код, когда он завернут. Используйте кнопку {} для переноса кода. – scrappedcola