我的讲师分配给我的6个javascript任务

问题描述 投票：0回答：1

我是javascript的完整入门者。我也是这个网站的新手。我正在寻求帮助以完成任务。通过查看讲义材料和在线寻求解决方案，我已经尝试了4个多小时。这给我带来了很多不必要的压力。在使用javascript之前，我们仅使用CSS和HTML。给了我6个JavaScript任务来处理已经提供给我的html文件（taskc.html）。任务如下

  1. 发表声明将h1的内容从“欢迎”更改为“文本”
  2. 第2条语句应在页面加载时创建一个新的警报窗口，该窗口会提供一条解释页面内容的消息
  3. 第三条语句应将标题更改为“文本”
  4. 第4条语句应在控制台中记录第一段元素的内容（innerHTML）。
  5. 第5条语句应在页面加载时隐藏第二段的内容
  6. 第六条语句应将标题的内容更改为您选择的新颜色

这里是html。 

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Task C - The Document Object Mode</title>
    </head>
    <body>
       <h1 id="header">Welcome</h1>
       <p id="first">This site uses JavaScript</p>
      <p id="second">Javascript is very useful</p>  
        </body>
         </html>

因为实际要添加的编码是在我给的.js文件中。所以我想我必须在html文件中链接js文件，所以我添加了

<script type="text/javascript" src="taskc.js"></script>

没有了，我去了讲义，我以为我只需要修改那里给我的一些代码，如

document.getElementById('demo').innerHTML = 'Hello World!';

当我将此代码放在方括号中时，出现错误（未定义文档）我对其进行了修改以满足任务1的要求这是

document.getElementById('header').innerHTML = 'text';

我很困惑，因为我不知道该错误的含义，并且当然也永远不会解释错误以及如何解决这些错误，因此我不得不查找如何解决该错误。我发现要解决此问题，必须将其声明为变量，所以最终这样做。

var document = 'taskc.html';

[当我对文档进行此操作时，警报和控制台消失了，但是当我进行实时预览时，只有语句1在起作用如果有人可以帮助我解决此问题，我将不胜感激，因为我对JavaScript的理解不足，无法在合理的时间内完成此操作。

javascript
1个回答
0
投票

所以首先：请使用Javascript函数来保持代码整洁干净。

示例：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <title>Task C - The Document Object Mode</title>
</head>
<body>
        <h1 id="header">Welcome</h1>
        <p id="first">This site uses JavaScript</p>
        <p id="second">Javascript is very useful</p>
        <script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>

function test(){
    alert("This is a test!");
}

始终实现html底部引用的文档脚本。如果使用JQuery，则可以使用以下代码检查文档是否已加载：

$(document).ready(function(){
//foo bar
});
0
投票

你在这里..

// 1

document.querySelector('#header').textContent = 'Text'

// 2

window.onload = () => alert('Message explaining what this page is about')

// 3

document.querySelector('title').textContent = 'Text'

// 4

console.log(document.querySelector('p'));

// 5 

document.querySelector('#second').style.visibility = 'hidden'

// 6

document.querySelector('#header').style.color = 'red'
     <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Task C - The Document Object Mode</title>
        </head>
        <body>
           <h1 id="header">Welcome</h1>
           <p id="first">This site uses JavaScript</p>
          <p id="second">Javascript is very useful</p>  
        </body>
     </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.