HomeworkLib
Question

use the sample html file below with a submit button to modify the style of the...

use the sample html file below with a submit button to modify the style of the paragraph text through JavaScript code. By clicking on the button, the font, the font size, and the color of the paragraph text will be changed.

<!DOCTYPE html>

·         <html>

·         <head>

·         <meta charset=utf-8 />

·         <title>Change Paragraph Text</title>

·         </head>  

·         <body>

·         <p id ='text'>I’m going to change this text, I hope.</p>  

·         <div>

·         <button id="jschange"

·         onclick="js_style()">Style</button>

·         </div>

·         </body>

·         </html>

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

Homework Answers

Answer #1

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script type="text/javascript">
function change_para_style()
{
text.style.fontSize = "20pt";
text.style.fontFamily = "Comic Sans MS";
text.style.color = "blue";
}
</script>
<title>Change Paragraph Text</title>
</head>
<body>
<p id ='text'>I'm going to change this text, I hope.</p>
<div>
<button id="jschange"
onclick="change_para_style()">Style</button>
</div>
</body>
</html>

0 0
Add a comment
Know the answer?
Add Answer to:
use the sample html file below with a submit button to modify the style of 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

  • The code below modifies the CSS style on button click. Give the output of the code...

    The code below modifies the CSS style on button click. Give the output of the code and modify the code such that background color of title should also be modified . <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript and HTML</title> <meta charset="utf-8"/> <style> h1 { color:blue; background-color:lightGreen; border:12px solid green; padding: 5px; border-radius: 15px; text-align: center; } p, h1 { } } </style> <script> function changeTitleCSSStyle() { var title = document.querySelector("#mainTitle"); title.style.color = 'black'; title.style.border = "5px dashed red"; } </script>...

  • HTML css When i refresh the page, the picture doesnt move at all for #i1 i...

    HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...

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

  • HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...

    HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px;...

  • <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head...

    <!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en">    <!-- head tag -->    <head>                 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title>    </head>    <!-- body tag -->     <body>             <style>        .sidenav {            height: 100%;             width: 160px;            position: fixed;            z-index: 1;             top: 0;            left: 0;           ...

  • could you please show me what I am doing wrong in the Javascript code below. <html>...

    could you please show me what I am doing wrong in the Javascript code below. <html>   <head> <meta charset="UTF-8"> <title></title> <style> #mytext { color: white; text-align: center; } </style> <script> var words = "The cat sat on the mat"; document.writeln("id='mytext"+ words '); </script>   </head>   <body>   </body> </html>

  • Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...

    Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...

  • HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of...

    HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of the content on Chp 14 slide 33. <!DOCTYPE html> <html lang="en"> <head>    <title> jQuery </title>    <meta charset="utf-8">    <style>        #details { display: none; }    </style>       <xxxx src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></xxxx>       </head> <body>    <h1>jQuery</h1>        <p>Many websites, including Amazon and Google, use jQuery, to provide interaction and dynamic effects on web pages.        <a href="#" id="more">...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

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