ZuoTi.Pro
Question

Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

Javascript to edit a HTML file. Where to begin?

<!doctype html>

<html>

   <head>

     <meta charset="utf-8">

     <title>TODO: Change The Title</title>

   </head>

   <body>

     <h1></h1>

     <p>First paragraph.</p>

     <p class="intro">Second <span>paragraph</span>.</p>

     <button id="start">Start</button>

     <main> </main>

     <!--

      Test 6: DOM Programming

      You MAY consult the notes for week 7, but you MAY NOT discuss this test or

      your code with any other students.  All work must be your own.

      Instructions:

      

      1. Put all solution code in a file named solution.js.  When you upload your

         solution to Blackboard, you can rename this file to solution.txt, so that

         Blackboard doesn't complain about it being unsafe.

      2. [2 marks] Write a `load` event handler to run the code in steps 3 - 6 when the page is ready

         (i.e., place all the code for steps 3 - 6 in a function that runs after the page is loaded).

      3. [2 marks] Using JS and the DOM API, change the web page's title to `Test 6`.

      

      4. [3 marks] Using JS and the DOM API, change the text of the paragraph element with

         class of `intro` to your full name and student number.

      5. [7 marks] Using JS and the DOM API, use the addEventListener() function to listen

         for a click event on the button element with id of `start`.  When the

         button is clicked, create a new `span` element with the text "Start was clicked!"

         and place that new `span` element within the page's `main` element.

         Clicking the start button multiple times should add this text again (i.e.,

         you will get one new "Start was clicked!" added with every click of the button).

      6. [7 marks] Using JS and the DOM API, use the setInterval() function to change the

         text of the `h1` element every 3 seconds to "There are N span elements in main,"

         where N is the number of span elements inside main (hint: use querySelectorAll() to count

         them and display the value).

      7. [2 marks] Make sure your code is properly indented and commented to explain what you are doing.

     -->

     <script src="solution.js"></script>

   </body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

solution.js

window.onload = function() {

    

   // grab title element

   let title = document.querySelector("title");

   // change the web page's title to "Test 6" using textContent

    title.textContent = 'Test 6';

    // grab paragraph with class name intro

    let intro = document.querySelector('.intro');

    // grab the span element within intro class element

    let introSpan = document.querySelector('span');

    intro.innerHTML = `Your full name is maheshbabu and Student number is `;

    introSpan.innerText = "12345";

    // add span element to paragaph element with class of intro.

    intro.appendChild(introSpan);


    // grab button element with id of start

    let button = document.querySelector('#start');

    // grab the main element

    let main = document.querySelector('main');

    button.addEventListener('click', function() {

        // create span element

        let span = document.createElement('span');

        span.textContent = "Start was clicked! ";

        main.appendChild(span);

    });


    // setInter function

    setInterval(function() {

        // grab h1 element

        let h1 = document.querySelector('h1');

        // grab span elements in side main

        let N = document.querySelectorAll('main span').length;

        h1.textContent = `There are ${N} span elements in main`;

    }, 3000);

};

window.onload = function() { 

    

   // grab title element

   let title = document.querySelector("title");

   // change the web page's title to "Test 6" using textContent

    title.textContent = 'Test 6';



    // grab paragraph with class name intro

    let intro = document.querySelector('.intro');

    // grab the span element within intro class element

    let introSpan = document.querySelector('span');

    intro.innerHTML = `Your full name is maheshbabu and Student number is `;

    introSpan.innerText = "12345";

    // add span element to paragaph element with class of intro.

    intro.appendChild(introSpan);




    // grab button element with id of start

    let button = document.querySelector('#start');

    // grab the main element

    let main = document.querySelector('main');

    button.addEventListener('click', function() {

        // create span element

        let span = document.createElement('span');

        span.textContent = "Start was clicked! ";

        main.appendChild(span);

    });




    // setInter function

    setInterval(function() {

        // grab h1 element 

        let h1 = document.querySelector('h1');

        // grab span elements in side main

        let N = document.querySelectorAll('main span').length;

        h1.textContent = `There are ${N} span elements in main`;

    }, 3000);



};

code images

output images:

after page load the output displays below image

After 3 seconds the output will displays below image

How many times you clicked start button, those times span element created, and counted span element inside main.

If my answer is useful to you, please give me thumbs up

0 0
Add a comment
Know the answer?
Add Answer to:
Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • <!DOCTYPE HTML> <html lang="en"> <head>    <meta charset="utf-8"> <title>Plaid Scarf Selector</title>    <link rel="stylesheet" href="a3.css" />...

    <!DOCTYPE HTML> <html lang="en"> <head>    <meta charset="utf-8"> <title>Plaid Scarf Selector</title>    <link rel="stylesheet" href="a3.css" />    <script src="a3.js"> </script> </head> <body>    <section>        <h1> Plaid Scarf Selector </h1><br>        <p>Feels close to real cashmere (but costs a lot less).        Think of this scarf as the next best thing to wearing authentic cashmere.        Its microsueded fabric really is that soft. In fact, at first touch some        mistake if for the real...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script>...

    Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script> function wrangleArray() { var string1 = prompt("Enter: This class is going to fast");//Must be entered by the user var string1 = "";//Is this right? I want that string to change later by a series of prompt questions document.getElementById("div1").innerHTML = "<p>" + sentence + "</p>"; var words = sentence.split(" ");//I need to convert my string to an Array is this the way to do it?...

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • use the sample html file below with a submit button to modify the style of the...

    use the sample html file below with a submit button to modify the style of the paragraph text through JavaScript code. By clicking on the button, the font, the font size, and the color of the paragraph text will be changed. <!DOCTYPE html> ·         <html> ·         <head> ·         <meta charset=utf-8 /> ·         <title>Change Paragraph Text</title> ·         </head>   ·         <body> ·         <p id ='text'>I’m going to change this text, I hope.</p>   ·         <div> ·         <button id="jschange" ·         onclick="js_style()">Style</button> ·         </div> ·         </body> ·         </html>

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT