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