Avatar of ivan rosa
ivan rosa
Flag for United States of America

asked on 

CSS To trigger once a JS function

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">

	<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 */
			openning .5s steps(30, end),
			blink-caret .5s step-end infinite;

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

		//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;

<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>
				<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>        
		<input type="button" onclick="submitButton(this.form)" value="Submit Information"></input>
		<button type="reset" value="Reset" style="font-weight: bold">Reset</button>

Open in new window

Web DevelopmentCSSHTMLJavaScriptWeb Development Software

Avatar of undefined
Last Comment
ivan rosa

8/22/2022 - Mon