0% found this document useful (0 votes)

19 views

Explain How To Evaluate Radiobutton in JavaScript With Suitable Example.

The document explains how to evaluate radio buttons in JavaScript. It discusses checking the checked property and using querySelector or querySelectorAll to select radio buttons. It also provides examples of code to check the state of radio buttons and redirect to a website based on a dropdown selection.

Uploaded by

MSBTE NOTES AND INFORMATION

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

19 views

Explain How To Evaluate Radiobutton in JavaScript With Suitable Example.

Uploaded by

MSBTE NOTES AND INFORMATION

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 5

‭2022‬

‭Q6.Attempt any two‬

‭ . Explain how to evaluate Radiobutton in JavaScript with suitable‬

1
‭example.‬

‭ ‬
→ ‭Evaluating radio buttons in JavaScript means accessing their state‬
‭(checked or unchecked) and taking action based on that state. Here are two‬
‭common ways to achieve this:‬

‭1. Checking the checked property:‬

‭●‬ R ‭ adio buttons have a built-in checked property that returns true if the‬
‭button is selected and false otherwise.‬
‭●‬ ‭You can use this property to check the state of a radio button element.‬

‭Here's an example:‬

‭HTML‬
‭ ‬‭input‬‭type‬‭=‭"‬ radio"‬‭name‬‭=‬‭"fruit"‬‭value‬‭=‭"‬ apple"‬‭id‬‭=‭"‬ apple"‬‭>‬‭Apple‬
<
‭<‬‭input‬‭type‬‭=‭"‬ radio"‬‭name‬‭=‬‭"fruit"‬‭value‬‭=‭"‬ banana"‬‭id‬‭=‬‭"banana"‬‭>‬‭Banana‬
‭<‬‭button‬‭onclick‬‭=‬‭"checkFruit()"‬‭>‬‭Check Selected Fruit‬‭</‬‭button‬‭>‬

‭ ‬‭script‬‭>‬
<
‭function‬‭checkFruit‬‭() {‬
‭if‬‭(‭d ‬ ocument‬‭.getElementById(‬‭"apple"‬‭).checked) {‬
‭alert(‬‭"Apple is selected"‬‭);‬
‭}‬‭else‬‭if‬‭(‭d‬ ocument‬‭.getElementById(‬‭"banana"‬‭).checked) {‬
‭alert(‬‭"Banana is selected"‬‭);‬
‭}‬‭else‬‭{‬
‭alert(‬‭"No fruit selected"‬‭);‬
‭}‬
‭}‬
‭</‬‭script‬‭>‬

‭2. Using querySelector or querySelectorAll:‬

‭●‬ Y ‭ ou can use these methods to select radio buttons based on specific criteria,‬
‭such as their name or id.‬
‭●‬ ‭Once you have selected the radio buttons, you can access their checked‬
‭property as before.‬
‭Here's an example:‬

‭HTML‬
‭ ‬‭input‬‭type‬‭=‭"‬ radio"‬‭name‬‭=‬‭"size"‬‭value‬‭=‭"‬ small"‬‭id‬‭=‭"‬ small"‬‭>‬‭Small‬
<
‭<‬‭input‬‭type‬‭=‭"‬ radio"‬‭name‬‭=‬‭"size"‬‭value‬‭=‭"‬ medium"‬‭id‬‭=‭"‬ medium"‬‭>‬‭Medium‬
‭<‬‭input‬‭type‬‭=‭"‬ radio"‬‭name‬‭=‬‭"size"‬‭value‬‭=‭"‬ large"‬‭id‬‭=‭"‬ large"‬‭>‬‭Large‬
‭<‬‭button‬‭onclick‬‭=‬‭"checkSize()"‬‭>‭C ‬ heck Selected Size‬‭</‬‭button‬‭>‬

‭ ‬‭script‬‭>‬
<
‭function‬‭checkSize‬‭() {‬
‭const‬‭selectedSize =‬‭document‬‭.querySelector(‬‭'input[name="size"]:checked'‬‭);‬
‭if‬‭(selectedSize) {‬
‭alert(‬‭"Selected size: "‬‭+ selectedSize.value);‬
‭}‬‭else‬‭{‬
‭alert(‬‭"No size selected"‬‭);‬
‭}‬
‭}‬
‭</‬‭script‬‭>‬

‭Additional points:‬

‭●‬ Y ‭ ou can use event listeners like onchange to dynamically update your code‬
‭based on the radio button's state.‬
‭●‬ ‭Consider using unique name attributes for radio buttons within a group to‬
‭ensure only one can be selected at a time.‬
‭●‬ ‭Remember to handle the scenario where no radio button is selected in your‬
‭evaluations.‬

‭ . Write a JavaScript to create a pull down menu with four options‬

2
‭[AICTE, DTE, MSBTE, GOOGLE]. Once the user will select one of the‬
‭options then user will be redirected to that site.‬
‭→‬ ‭Here is the JavaScript code to create a pull-down menu with four‬
‭ ptions (AICTE, DTE, MSBTE, GOOGLE) and redirect the user to the‬
o
‭selected website:‬

‭HTML‬
‭<!DOCTYPE html>‬

‭ ‬‭html‬
<
‭lang‬‭=‬‭"en"‬‭>‬

‭<‬‭head‬‭>‬
‭ ‬‭meta‬
<
‭charset‬‭=‬‭"UTF-8"‬‭>‬

‭ ‬‭meta‬
<
‭name‬‭=‭"‬ viewport"‬
‭content‬‭=‬‭"width=device-width, initial-scale=1.0"‬‭>‬

‭<‬‭title‬‭>Pull‬‭Down Menu‬‭</‬‭title‬‭>‬
‭ /‬‭head‬‭>‬
<
‭<‬‭body‬‭>‬
‭<‬‭h1‬‭>‭S ‬ elect a website:‬‭</‬‭h1‬‭>‬
‭<‬‭select‬‭id‬‭=‬‭"website-select"‬‭>‬
‭<‬‭option‬‭value‬‭=‬‭"https://aicte-india.org/"‬‭>‭A‬ ICTE‬‭</‬‭option‬‭>‬
‭<‬‭option‬‭value‬‭=‬‭"https://www.dte.org.in/"‬‭>‭D ‬ TE‬‭</‬‭option‬‭>‬
‭<‬‭option‬‭value‬‭=‬‭"https://msbte.org.in/"‬‭>‭M
‬ SBTE‬‭</‬‭option‬‭>‬
‭<‬‭option‬‭value‬‭=‬‭"https://www.google.com/"‬‭>‭G ‬ OOGLE‬‭</‬‭option‬‭>‬
‭</‬‭select‬‭>‬
‭<‬‭button‬‭onclick‬‭=‭"‬ redirectWebsite()"‬‭>‭G
‬ o to website‬‭</‬‭button‬‭>‬

‭<‬‭script‬‭>‬
‭function‬‭redirectWebsite‬‭() {‬
‭const‬‭selectedWebsite =‬
‭document‬‭.getElementById(‬‭"website-select"‬‭).value;‬
‭window‬‭.location.href = selectedWebsite;‬
‭}‬
‭</‬‭script‬‭>‬
‭</‬‭body‬‭>‬
‭</‬‭html‬‭>‬

‭Explanation:‬

‭ .‬ ‭We create an HTML select element with an id of "website-select".‬

1
‭2.‬ ‭Inside the select element, we create four option elements with‬
‭different values representing the URLs of the websites.‬
‭3.‬ ‭We create a button element with an onclick event listener that calls‬
‭the redirectWebsite function.‬
‭4.‬ ‭Inside the redirectWebsite function, we get the selected value of the‬
‭select element using‬
‭document.getElementById("website-select").value.‬
‭5.‬ ‭We assign the selected URL to the window.location.href property,‬
‭which redirects the user to the chosen website.‬

‭ . we need to write a JavaScript script to create a frame structure with‬

3
‭three frames as shown in the image. The script should also perform the‬
‭following actions:‬

‭●‬ W ‭ hen the user clicks the‬‭SPORT‬‭button in Frame 1, the sport.html‬

‭webpage should appear in Frame 2.‬
‭●‬ ‭When the user clicks the‬‭MUSIC‬‭button in Frame 1, the music.html‬
‭webpage should appear in Frame 3.‬
‭●‬ ‭When the user clicks the‬‭DANCE‬‭button in Frame 1, the dance.html‬
‭webpage should appear in Frame 4.‬
‭ TML‬
H
‭ !DOCTYPE html>‬
<

‭ ‬‭html‬
<
‭lang‬‭=‬‭"en"‬‭>‬

‭<‬‭head‬‭>‬

‭ ‭m
< ‬ eta‬
‭charset‬‭=‬‭"UTF-8"‬‭>‬

‭<‭m
‬ eta‬
‭ ame‬‭=‭"‬ viewport"‬
n
‭content‬‭=‬‭"width=device-width, initial-scale=1.0"‬‭>‬

‭<‭t‬ itle‬‭>Frame‬‭Structure‬‭</‬‭title‬‭>‬
‭ /‬‭head‬‭>‬
<
‭<‬‭body‬‭>‬

‭<‭h
‬ 1‬‭>‬‭Frame Structure‬‭</‬‭h1‬‭>‬

‭<‭f‬rameset‬‭cols‬‭=‭"‬ 30%, 30%, 40%"‬‭>‬

‭<‬‭frame‬‭src‬‭=‭"‬ index.html"‬‭name‬‭=‬‭"Frame 1"‬‭>‬

‭ ‬‭frame‬‭name‬‭=‬‭"Frame 2"‬‭>‬
<
‭<‬‭frame‬‭name‬‭=‬‭"Frame 3"‬‭>‬
‭<‬‭frame‬‭name‬‭=‬‭"Frame 4"‬‭>‬

‭</‬‭frameset‬‭>‬

‭<‭s
‬ cript‬‭>‬
‭function‬‭loadPage‬‭(frameName, pageUrl) {‬
‭document‬‭.frames[frameName].location.href = pageUrl;‬
‭}‬

‭window‬‭.onload =‬‭function‬‭() {‬
‭// Add click event listeners to the buttons in Frame 1‬
‭ ocument‬‭.querySelector(‬‭'#Frame 1‬
d
‭button[name="SPORT"]'‬‭).addEventListener(‬‭'click'‬‭,‬‭function‬‭() {‬
‭loadPage(‬‭'Frame 2'‬‭,‬‭'sport.html'‬‭);‬
‭});‬

‭document‬‭.querySelector(‬‭'#Frame 1‬
‭button[name="MUSIC"]'‬‭).addEventListener(‬‭'click'‬‭,‬‭function‬‭() {‬
‭loadPage(‬‭'Frame 3'‬‭,‬‭'music.html'‬‭);‬
‭});‬

‭document‬‭.querySelector(‬‭'#Frame 1‬
‭button[name="DANCE"]'‬‭).addEventListener(‬‭'click'‬‭,‬‭function‬‭() {‬
‭loadPage(‬‭'Frame 4'‬‭,‬‭'dance.html'‬‭);‬
‭});‬
‭};‬
‭</‬‭script‬‭>‬

‭ /‬‭body‬‭>‬
<
‭</‬‭html‬‭>‬

‭Explanation:‬

‭ .‬ ‭We create an HTML frameset element with three frames.‬

1
‭2.‬ ‭We create a JavaScript function called loadPage() which takes two‬
‭parameters: the name of the frame and the URL of the page to load.‬
‭3.‬ ‭In the window.onload event listener, we add click event listeners to the‬
‭buttons in Frame 1.‬
‭4.‬ ‭When the user clicks on one of the buttons, the corresponding loadPage()‬
‭function is called to load the specified page in the corresponding frame.‬

‭Example usage:‬

‭1.‬ ‭Save the above code as index.html and place the sport.html, music.html,‬
‭and dance.html files in the same directory.‬
‭2.‬ ‭Open the index.html file in a web browser.‬
‭3.‬ ‭Click on the‬‭SPORT‬‭button in Frame 1. You should see the sport.html page‬
‭appear in Frame 2.‬
‭4.‬ ‭Click on the‬‭MUSIC‬‭button in Frame 1. You should see the music.html page‬
‭appear in Frame 3.‬
‭5.‬ ‭Click on the‬‭DANCE‬‭button in Frame 1. You should see the dance.html page‬
‭appear in Frame 4.‬