troubleshooting Question
CSS To trigger once a JS function
asked on
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
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>
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.