ZuoTi.Pro
Question

//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the...


//--------//
// Events //
//--------//
console.log("Events");

// 1. Change the link (the <a> tag) in the HTML body below such that a hello
// message is displayed on a click event.

//--------------//
// Input Fields //
//--------------//
console.log("Input Fields");

// 1. Change the background color to red for the input text field (the <input>
// tag) in the HTML body when obtaining the focus and change it back to
// white when the focus is lost.

// 2. Read the content of the input field (the <input> tag) when the focus is
// lost and alert it to the user.

//------------//
// Paragraphs //
//------------//
console.log("Paragraphs");

// 1. Write JavaScript code that changes the text in the paragraph below
// (the <p> tag) from "Hello World!" to "Goodbye World!".

//--------//
// Images //
//--------//
console.log("Images");

// 1. Add an image to the HTML body (use the <img> tag). Make it disappear when
// someone clicks on it.

//--------//
// Styles //
//--------//
console.log("Styles");

// 1. Use the style of div1 and div2 to swap the colors of the divs.

function swapColors() {
// TODO
}

</script>
</head>
<body>
See console!<br><br>
<a>Click here for a greeting!</a><br><br>
<input type="text"><br><br>
<p>Hello World!</p>
<div id="div1"
style="background-color:yellow;"
onclick="swapColors();">
Hello
</div>
<div id="div2"
style="background-color:green;"
onclick="swapColors();">
World
</div>
</body>
</html>

java script question

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

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "sample.html" is created, which contains following code.

sample.html :


<html>
<head>
<!--title for web page -->
<title>HTML, css and Javascript</title>
<!--javascript -->
<script>
//Events in Javascript
//function defination changeText()
function changeText()
{
//displaying message on console
console.log("Events");
//selecting hyperlink and changing text to hello
document.getElementById("hyper").innerText="Hello";
}
//function defination changeColor()
function changeColor()
{
//changing background color for input text field to red
document.getElementById("txtName").style.backgroundColor="red";
}
//function defination originalColor()
function originalColor()
{
//displaying message on console
console.log("Input Fields");
//changing background color for input text field to white
document.getElementById("txtName").style.backgroundColor="white";
//reading the content and alerting to user
alert(document.getElementById("txtName").value);
}
//function defination changepText()
function changepText()
{
//displaying message on console
console.log("Paragraphs");
//onclick of paragraph changin text of paragraph
document.getElementById("myPara").innerText="Goodbye World!";
}
//function defination disappearImage();
function disappearImage()
{
//displaying message on console
console.log("Images");
//select the image using id and set display property to none
//so image will disapperar
document.getElementById("myImage").style.display="none";
}
//function defination swapColors()
function swapColors(divElement,color)
{
//displaying message on console
console.log("Styles");
if(color=='yellow')
{
//setting color to green
divElement.style.backgroundColor="green";
}
else
{
//setting color to yellow
divElement.style.backgroundColor="yellow";
}

}
</script>
</head>
<body>
<h3>Hyperlink</h3>
<!-- 1.hyperlink -->
<a id="hyper" href="javascript:changeText();">Demo Hyperlink</a> <br> <br>
<h3>Input Fields</h3>
<!--2 Input Fields -->
Enter Name :
<input type="text" id="txtName" onfocus="changeColor()" onblur="originalColor()"/>
<br><br>
<h3>paragraphs</h3>
<!--paragraphs -->
<p id="myPara" onclick="changepText()">Hello World!</p>
<h3>Images</h3>
<!--images -->
<img id="myImage" src="Images/1.jpg" height="200px" width="200px" onclick="disappearImage()"/>
<br><br>
<h3>Styles</h3>
<div id="div1" style="background-color:yellow;" onclick="swapColors(this,'yellow');">Hello </div>
<div id="div2" style="background-color:green;" onclick="swapColors(this,'green');">World</div>
</body>
</html>
======================================================

Output :  Open page sample.html in the browser and will get the screens as shown below

Screen 1 : sample.html

HTML, css and Javascript X + → C ⓘlocalhost/Website/sample.html Hyperlink Demo Hyperlink Input Fields Enter Name paragraphs Hello World! Images YOUDO TODAY) Styles Hello

Screen 2 : click on hyperlink to change the text

Screen 3 : for Input fields will get the screen as shown below

Screen 4 : click on para to get the text as Good Bye as shown in below screen

Screen 5: Click on image so image will disappear

Screen 6 : click on paragraph to swap colors

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the...
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

  • Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

    Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file and save it as nnLab8.htm. 3. Add the following HTML to the file: <!DOCTYPE HTML> <html> <head> <title>Hello World - jQuery Style</title> </head> <body> <div id="first"></div> <div id="second"></div> <a href="#" id="link">Click Me!</a><br /> <span id="greeting"></span> </body> </html> 4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1....

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • 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. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head>     <title>midterm exam</title>     <link rel="stylesheet" href="css/q1.css" /> </head> <body>     <div id = "page">        <form>   ...

  • 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,...

  • Modify this code to store the form elements as variables and display them on the page...

    Modify this code to store the form elements as variables and display them on the page in an HTML table. <!DOCTYPE html> <html> <head> <script> function getValues() {     var result = ""; result += "First Name: " + document.forms["myForm"]["fname"].value + "<br>"; result += "Last Name: " + document.forms["myForm"]["lname"].value + "<br>"; result += "Address: " + document.forms["myForm"]["address"].value + "<br>"; result += "City: " + document.forms["myForm"]["city"].value + "<br>"; result += "State: " + document.forms["myForm"]["state"].value + "<br>"; document.getElementById("output").innerHTML = result; } </script>...

  • trying to get this html to calculate tax values, useing a js library file,    <script...

    trying to get this html to calculate tax values, useing a js library file,    <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed .=0 // Returns: flat tax (13%) due after deductions { var deduction, taxableIcome, total tax; deduciton= Math.max(itermized, 4150): taxableIncome = Math.max(income - debuction, o); toatltax = 0.13*tableTincome return totaltax; } *^js code***\/ html code* <html> <head> <title> taxes </title> <script type="text/javascript"> { var number; function Icometace(income, itemized) // Assynes: income .=0, itemzed...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

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
ADVERTISEMENT