troubleshooting Question

CSS To trigger once a JS function

Avatar of ivan rosa
ivan rosaFlag for United States of America asked on
Web DevelopmentCSSHTMLJavaScriptWeb Development Software
3 Comments1 Solution278 ViewsLast Modified:
Hi Folks,

I'm newbie in this web development adventure...,working with this simple page below,
synopsis: basically collects a few things inputs via HTML, then JS collects them and display them within the same page
Quesiton: how can I style (apply a different type of CSS)  to the results that Javascript provides once triggered....?

if you can give me an example that would be awesome!!! :)
Thanks for looking


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Curriculum Vitae</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style type="text/css">
		body {
		margin: 0;		
		}	
		/* Styling Header*/
		.header {
		background-color: #964a4a;
		padding: 20px;
		text-align: center;
		font-family: Georgia, 'Times New Roman', Times, serif;
		color: #fff;
		font-family: monospace;
		overflow: hidden; /* Ensures the content is not revealed until the animation */
		border-right: .15em solid orange; /* The typwriter cursor */
		margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		animation: 
			openning .5s steps(30, end),
			blink-caret .5s step-end infinite;
		}

		/* The Opening effect */
		@keyframes openning {
		from { width: 0 }
		to { width: 100% }
		}
	</style>

	<script>
		//not sure how to create this function to show all the inputs in the section of the form by replacing the form. as described in the above pics
		function submitButton(frm){
			var form = document.forms.cvapplication;
			var output = '<p>Your submission has been accepted</p>';
			output += '<p>Enter your full name: ' + form.fname.value + '</p>';
			output += '<p>Select State: ' + form.state.value + '</p>';
			output += '<p>Select Education Level: ' + form.education.value + '</p>';
			form.innerHTML = output;
		}
	</script>

</head>	
<body bgcolor="#333300">
	<img src="scrollcity.jpg" width="300" height="158">
	<h1>Curriculum Vitae</h1>

	<form name ="cvapplication" id="cvapplication"> 
		<p><b>Enter your Full Name: </font></b></p>
		<input type="text" name="fname" id="fname" size="40" style="font-style: oblique"> 

		<p><b>Select </b></font><b>
		State: </font></b></p>
				<p>
				<select name="state" id="state" size="1" style="font-style: oblique">
				<option>- Select -</option>
				<option value="AK">Alaska</option>
				<option value="AZ">Arizona</option>
				<option value="WY">Wyoming</option></select> </p>

        <p><b>Input Your Hobbies</font></b></p>
        <textarea rows="3" name="hobbies" id="hobbies" cols="100" style="font-style: oblique"></textarea></p>

		<p><b>Select Education Level: </font></b></p>		
		<select name="education" id="education" size="3">
					<option value="">- Select -</option>
					<option value="Below High School">Below High School</option>
					<option value="High School / GED">High School / GED</option>
                    <option value="Boot Camp">Boot Camp</option>        
      
		</select>
				
		<input type="button" onclick="submitButton(this.form)" value="Submit Information"></input>
		<button type="reset" value="Reset" style="font-weight: bold">Reset</button>
	</body>
</form> 
</html>
ASKER CERTIFIED SOLUTION
Danilo Andrade
Level 3 Systems Administrator

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros