Question

In: Computer Science

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 IDs you made and store them in variables. You should use either document.querySelector or document.getElementByID, both will work.
  • Create a click event listener on each button.
    • When the "Foo" button is clicked, an h3 with the text "Foo" should be created and appended to the main tag.
    • When the "Bar" button is clicked, an h3 with the text "Bar" should be created and appended to the main tag.
    • When the "Foobar" button is clicked, an h2 with the text "FooBar" should be created and appended to the main tag.

Solutions

Expert Solution

Please Check the attachment


Explanation:


Related Solutions

For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary).  When required to write a function, you must include a script to test the function with at least two different data sets.  In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...
This should be done in JavaScript. The HTML file should only contain an empty main tag....
This should be done in JavaScript. The HTML file should only contain an empty main tag. All other HTML on the page should be created with JavaScript. The JavaScript file should be a separate file.   Make an empty HTML file, put an empty main tag inside the body. In your JavaScript, use querySelector to get a reference to the main tag and save it in a variable named main. Look up three good jokes and store them as separate variables...
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....
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.
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...
Assignment Requirements Write a python application that consists of two .py files. One file is a...
Assignment Requirements Write a python application that consists of two .py files. One file is a module that contains functions used by the main program. NOTE: Please name your module file: asgn4_module.py The first function that is defined in the module is named is_field_blank and it receives a string and checks to see whether or not it is blank. If so, it returns True, if not it return false. The second function that is defined in the module is named...
This is in HTML and JavaScript So I have 2 radio buttons One called students and...
This is in HTML and JavaScript So I have 2 radio buttons One called students and one called teacher. If the user selects the student then a list of check boxes these should appear. These should not be visable if the user selects the teacher radio button. - buy text books - visit teachers website - attend class If the user selects the teacher radio button then all the text boxes above should be hidden From the user. Then these...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...
a webpage refer to javascript file for interconnectivty and two css file for styling. how many...
a webpage refer to javascript file for interconnectivty and two css file for styling. how many RTTs are required for browser to fully display the page using non persistent and persistent http?
take the following html code and make it work for html validator. heres the ,html file...
take the following html code and make it work for html validator. heres the ,html file <!DOCTYPE html> <html lang="en">    <head>        <title> GettingStarted</title>        <meta charset="utf-8">        <link href="Style.css" rel="stylesheet">    </head>       <body>        <header><h1>GettingStarted</h1></header>        <nav>               <b>        <a href="Home.html">Home</a>&nbsp;        <a href="GettingStarted.html">Getting Started</a>&nbsp;        <a href="MaterialsNeeded.html">Materials Needed</a>&nbsp;                      <a href="TroubleShooting.html">TroubleShooting</a>&nbsp;        <a href="InfoMaterials.html">Infomation on materials</a>&nbsp;   ...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT