Question

In: Computer Science

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...

use VISUAL STUDIO CODE to write this javascript program

Exercise 1

(a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked.

(b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list. Use createElement and appendChild.

(c) Redo your createTable code from last week’s lab so that it uses createElement and appendChild rather than setting an innerHTML property.

Solutions

Expert Solution

a) HTML Code:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var para1 = document.createElement("p");
var para2 = document.createElement("p");
var para3 = document.createElement("p");
var para1Text = document.createTextNode("www.google.com");
var para2Text = document.createTextNode("www.microsoft.com");
var para3Text = document.createTextNode("www.adobe.com");
para1.appendChild(para1Text);
para2.appendChild(para2Text);
para3.appendChild(para3Text);
document.body.appendChild(para1);
document.body.appendChild(para2);
document.body.appendChild(para3);
}
</script>

</body>
</html>

Output:

***************************************************************************************************************

b) HTML Code:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<ul id="myList">
</ul>

<script>
function myFunction() {
   let recs = ["my item…1","my item…2","my item…3","my item…4","my item…5"]
recs.forEach(createListItem);
}

function createListItem(value, index, array) {
var node = document.createElement("LI");
var textnode = document.createTextNode(value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

</body>
</html>

Output:

***************************************************************************************************************

c) HTML Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);

var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);

var z = document.createElement("TD");
var t = document.createTextNode("cell");
z.appendChild(t);
document.getElementById("myTr").appendChild(z);
}
</script>

</body>
</html>

Output:

venereology answered 3 hours ago
Next > < Previous

Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
VISUAL STUDIO CODE Use a for loop for to create "password". Request the password at least...
VISUAL STUDIO CODE Use a for loop for to create "password". Request the password at least 3 times. If the password is 12345, the procedure ends, if the correct password entered, close excel saving changes. THANKS
JavaScript 1. FizzBuzz Submit js file with functioning code Write a program that uses console.log to...
JavaScript 1. FizzBuzz Submit js file with functioning code Write a program that uses console.log to print all the numbers from 1 to 120, with two exceptions. For numbers divisible by 4, print "Fizz" instead of the number, and for numbers divisible by 10 (and not 4), print "Buzz" instead. When you have that working, modify your program to print "FizzBuzz", for numbers that are divisible by both 4 and 10 (and still print "Fizz" or "Buzz" for numbers divisible...
using Visual Studio write a code containing a main() program that implements the coin change state...
using Visual Studio write a code containing a main() program that implements the coin change state machine in C++ according to the guidance given in Translating a state machine to C++ Test your code using prices 1 and 91 cents, and assume change is calculated from a dollar bill. Copy and paste your console output to a text editor and save the result in a single file named console.txt. Upload your exercise081.cpp and console.txt files to Canvas.
How to do in C++ HTML Converter Create a program that reads an HTML file and...
How to do in C++ HTML Converter Create a program that reads an HTML file and converts it to plain text. Console HTML Converter Grocery List * Eggs * Milk * Butter Specifications Your instructor should provide an HTML file named groceries.html that contains these HTML tags: <h1>Grocery List</h1> <ul>     <li>Eggs</li>     <li>Milk</li>     <li>Butter</li> </ul> When the program starts, it should read the contents of the file, remove the HTML tags, remove any spaces to the left of the tags, add...
This needs to be written in JavaScript with two files. One HTML file and a JavaScript...
This needs to be written in JavaScript with two files. One HTML file and a JavaScript file. Make an empty HTML file, put three buttons inside the body and an empty main tag below the buttons. The text of the buttons should be "Foo", "Bar", and "FooBar" respectively. Don't put the " in the buttons that's just for clarification in these instructions. Add unique IDs to each button In your JavaScript, get 3 separate references to the buttons using the...
 VISUAL STUDIO (File Creation and Submissions)  FLOWCHART  Writing program in C++ ( cout,...
 VISUAL STUDIO (File Creation and Submissions)  FLOWCHART  Writing program in C++ ( cout, \n, \t, solving expressions )  Correcting errors Q1: Draw flow Chart of the following problems: a) Display “Hello World” on screen. b) Display Your Name, date of birth and mobile number on screen. c) Compute and display the perimeter and area of a rectangle with a height of 7 inches and width of 5 inches. d) Compute and display the perimeter and area...
In visual Studio C++ Create a program that uses a for loop to input the high...
In visual Studio C++ Create a program that uses a for loop to input the high temperature, and low temperature for each day of the week. The high and low will be placed into two elements of the array. For each loop the high and low will be placed into the next set of elements of the array. After the temps for all seven days have been entered into the array, a for loop will be used to pull out...
This is C++ Create a program that reads an HTML file and converts it to plain...
This is C++ Create a program that reads an HTML file and converts it to plain text. Console: HTML Converter Grocery List * Eggs * Milk * Butter Specifications: The HTML file named groceries.html contains these HTML tags: <h1>Grocery List</h1> <ul> <li>Eggs</li> <li>Milk</li> <li>Butter</li> </ul> When the program starts, it should read the contents of the file, remove the HTML tags, remove any spaces to the left of the tags, add asterisks (*) before the list items, and display the...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT