Using form events functions to answer this question. Use the attached form html file which contains...

Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Here is my HTML code

<!DOCTYPE html>
<html>
<head>
    <title>midterm exam</title>
    <link rel="stylesheet" href="css/q1.css" />
</head>
<body>
    <div id = "page">
       <form>
          <input type="radio" id="first" name="midterm" value="first">
          <label for="first">First</label><br>
          <input type="radio" id="second" name="midterm" value="second">
          <label for="second">Second</label><br>
       </form>
   </div>
    <script src="js/q4.js"></script>
</body>
</html>

Solutions

Expert Solution

Answer) The code for the above question is below: Save this file with name q4.js inside js folder. Confirm the src path as you have given in HTML script src tag.

// getting first and second buttons

first_radio=document.getElementById("first");

second_radio=document.getElementById("second");

// creating a label element for first to display

var label_first = document.createElement("label");

var node1 = document.createTextNode("First");

// creating a label element for second to display

var label_second = document.createElement("label");

var node2 = document.createTextNode("Second");

// adding event Listener to first radio so that when it is clicked it displays label

first_radio.addEventListener('change', function(){

this.after(node1);

});

// adding event Listener to second radio so that when it is clicked it displays label

second_radio.addEventListener('change', function(){

this.after(node2);

});

CODE SCREENSHOT

OUTPUT: Here you can see when we click first another label first is displayed. If you want to display first one time remove the label from the HTML file.

venereology answered 4 months ago

Next > < Previous

Related Solutions

An HTML file is a text file that contains text to be displayed in a browser...

An HTML file is a text file that contains text to be displayed in a browser and __________ to be interpreted (read) by the browser formatting and styling the document Both C++ and javascript are computer programing languages; what are their differences? What HTML tag can let you insert javascript in to document Which attributes of the <script> tag tells the brorwser what kind of scripting language is insterted? (give an example) in the javascript section of the HTML file,...

Write an HTML file for a web page that contains the items below. Use an internal...

Write an HTML file for a web page that contains the items below. Use an internal style sheet to specify all fonts, sizes, colors, and any other aspects of the presentation. Your page should contain the following items: 1) A header with white text on dark green background (just for the header, not the entire page), in Impact font, bold, and centered. 2) Two paragraphs of text, each with dark gray text in Tahoma font, on a light blue background,...

. The attached file contains the six variables. I have already attempted this answer and got...

. The attached file contains the six variables. I have already attempted this answer and got it wrong. Please ignore the checkmarks. Question Using the information below select all of the variables that are dichotomous (i.e., two categories). QN88 QN33 _SMOKER3 _SLEPTIM1 QN44 _RFBING5 Behavioral Risk Factor Surveillance System (BRFSS 2016) Calculated Variables https://www.cdc.gov/brfss/annual_data/2016/pdf/2016_calculated_variables_version4.pdf Youth Risk Behavior Surveillance System (YRBSS 2015) YRBS Data User's Guide https://www.cdc.gov/healthyyouth/data/yrbs/pdf/2015/2015_yrbs-data-users_guide_smy_combined.pdf

Look at the attached Excel file which contains two column charts identifying data for a company:...

Look at the attached Excel file which contains two column charts identifying data for a company: Week 1 Discussion Topic 2 Ethics.xls. Notice that the data is depicted differently, however, the data presented is really the same. Is it ethical to present data in a different way in order to make the data appear more favorable? Explain your reasoning.

Please answer the following questions using the data in the attached Excel file. You are thinking...

Please answer the following questions using the data in the attached Excel file. You are thinking of investing in Abercrombie and Fitch Co. (ANF). The returns for ANF are embedded in an Excel document below (Source: yahoo.com). 1. For the investment in ANF that you are considering, for all of 2012 determine the following items: a) the mean return b) the median return c) the standard deviation d) the variance e) the coefficient of variation The weekly rates of return...

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For...

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For each question, answers are limited to a maximum of 150-200 words 1. What is practical significance?

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For...

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For each question, answers are limited to a maximum of 150-200 words. 1. What is ANOVA?

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For...

Answer each question using essay format (that is, use sentences and paragraphs, not point form). For each question, answers are limited to a maximum of 150-200 words 1. What is chi square?

Create a form using the following HTML elements at a minimum. Style the form in your...

Create a form using the following HTML elements at a minimum. Style the form in your CSS. You do not need to include a form action (i.e. the form doesn't have to do anything - we're designing the front end of the form). textarea textbox input type of "email" select radio button checkbox submit button style at least three elements of your form in your stylesheet, including your submit button Use a comment to delineate the beginning and end of...

Is it a good idea to use a template engine that keeps the form of HTML...

Is it a good idea to use a template engine that keeps the form of HTML or is abstracting this form away a better notion? In a few paragraphs state

Subjects