HomeworkLib
Question

create a web page with a textbox labelled "color", and several; h1's. when the user clicks...

create a web page with a textbox labelled "color", and several; h1's. when the user clicks on any h1 change the color of the h1 that was clicked to color that is typed in the textbox using javascript.. please help me out

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Code

<!DOCTYPE html>
<html>
<head>
   <title>Color Label</title>
</head>

<body>
Label : <input type="text" id="Label"> <!-- Text Label-->
<div id="1"><h1>First Heading</h1></div> <!-- Headings -->
<div id="2"><h1 >Second Heading</h1></div>
<div id="3"><h1>Third Heading</h1></div> <!-- We assign ids to each element -->
<div id="4"><h1>Fourth Heading</h1></div>
<div id="5"><h1>Fith Heading</h1></div>

</body>

<script type="text/javascript">

   document.getElementById('1').onclick = changeColor1; // adding on click event to each elmenet and calling respective functions
   document.getElementById('2').onclick = changeColor2;   
   document.getElementById('3').onclick = changeColor3;   
   document.getElementById('4').onclick = changeColor4;   
   document.getElementById('5').onclick = changeColor5;   

function changeColor1() {
document.getElementById('1').style.color = document.getElementById("Label").value; // change color for id 1to what is entered in text box
return false;
}


function changeColor2() {
document.getElementById('2').style.color = document.getElementById("Label").value; // similarly change value for other h1's
return false;
}


function changeColor3() {
document.getElementById('3').style.color = document.getElementById("Label").value;
return false;
}


function changeColor4() {
document.getElementById('4').style.color = document.getElementById("Label").value;
return false;
}


function changeColor5() {
document.getElementById('5').style.color = document.getElementById("Label").value;
return false;
}   


</script>

</html>

Output

Label: purple First Heading Second Heading Third Heading Fourth Heading Fith HeadingLabel: green First Heading Second Heading Third Heading Fourth Heading Fith Heading

0 0
Add a comment
Know the answer?
Add Answer to:
create a web page with a textbox labelled "color", and several; h1's. when the user clicks...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Create a webpage in which the user is allowed to select the page's background and color...

    Create a webpage in which the user is allowed to select the page's background and color whether the page uses serif or sans serif fonts. The change the body element's style attribute accordingly. If the user onclicks any of the options, the webpage will turn into that format. For example, if the user clicks "Gray background", the background color of the webpage will be Gray. If the user clicks Serif-text, the text in the web page will be in Serif...

  • JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user...

    JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions. Your trivia game should contain: 2 text boxes 2 select dropdowns 2 multiple choice questions (using radio buttons, 4 options min) 1 choose-all-that-apply (checkboxes, 4 options min, one answer should be "None of the above"). No part-points for semi-correct answers. The questions can cover any topic you wish - but please keep it professional and easy enough that the...

  • HTML Web Page project: Need help to create a web page exactly as the example below...

    HTML Web Page project: Need help to create a web page exactly as the example below using HTML. I need the source code. Page 1 of CA272 Midterm Welcome to your name's CA272 Midterm Text In this class, I learned how to... 1. create an X)HTML web page, where I can 2. change the size of my font, 3. change the color of my fonts, 4. change my font style, 5. and change the background color of my web page....

  • Create a web page like the one shown here. The user can enter a number n,...

    Create a web page like the one shown here. The user can enter a number n, and when the button is clicked, the Harshad numbers between 1 and n are displayed: linking an html file with a javascript file. Count 'em! Find and Count the Niven Numbers Between 1 and: 200 Number of Nivens: 59 Niven Numbers: 1 23456789 10 12 18 20 21 24 27 30 36 40 42 45 48 50 54 60 63 70 72 80 81...

  • Please help me~~~~ using javascript, Display a text field so that the user can enter an...

    Please help me~~~~ using javascript, Display a text field so that the user can enter an integer. Display two buttons “Start Animation” and “Stop Animation”. When the button “Start Animation” is clicked, the web page displays an animated times table in the following manner. For example, if the user entered the number 6, then the animation displays 6 x 1 = 6, one second later it replaces it with 6 x 2 = 12, one second later it replaces it...

  • Using JavaFX create a Roll application that implements the GUI shown When the user clicks the Rol...

    Using JavaFX create a Roll application that implements the GUI shown When the user clicks the Roll button, the program must roll the dice, change the figures randomly, calculate the sum of the dice and show it in a label

  • Write a Visual C# program that will input the user's name and a message. The user...

    Write a Visual C# program that will input the user's name and a message. The user will be able to choose from an option of formatting tools to change the way the message (and only the message) will look. The user can choose from bold, underline, italic, along with several different color options. All changes the user selects will be displayed in the message textbox. Once the user selects the Finish button, the two pieces of information entered by the...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • Please help with this assignment section A. This question is from world wide web Info Sys Dev. Section A te HTML/JavaSc...

    Please help with this assignment section A. This question is from world wide web Info Sys Dev. Section A te HTML/JavaScript web page called sectiona.html, that has the fpllowing items: a. 2 text items labeled as "CAD Dollar" and "US Dollar", the first(CAD dollars) is enabled with id-"cad", while the later is disabled with id-us" b.1 button named as "convert". functionality: When the user clicks on the button, a JavaScript function named "convert" will be called to convert the value...

  • Using PHP and MySQL, create a Web page to be used for storing software development bug reports in...

    Using PHP and MySQL, create a Web page to be used for storing software development bug reports in a MySQL database. Include fields such as product name and version, type of hardware, operating system, frequency of occurrence, and proposed solutions. Include links on the main page that allow you to create a new bug report and update an existing bug report. I have tried the various solutions provided previously for this exercise, but it does not work because every author...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT