How to get form input value on button click in Vanilla JavaScript?

I'm trying to move away from jQuery but getting stuck on something that seems so simple: I just want to update the paragraph text with the input values when the button is clicked. I'm not getting console errors but not sure where I'm messing up as the input values aren't ing through.

Edit: My problem is that I want to have the name and job input values attached to the

content on button click, currently that isn't happening but I'm also not getting console errors.

Fiddle: /

var nameValue = document.querySelector( ".input-name" ).value;
var jobValue = document.querySelector( ".input-job" ).value;
var resultsBlock = document.querySelector( ".results" );
var resultName = document.querySelector( ".name-result" );
var resultJob = document.querySelector( ".job-result" );


function showSignature() {
    resultName.innerHTML += nameValue;

    resultJob.innerHTML += jobValue;

    resultsBlock.classList.remove( "hidden" );
}

document.querySelector( ".show-signature" ).addEventListener( 'click', function(){
    showSignature();
});

/* Main Styles for Email Signature Generator */
html, body {
	height: 100%;
	width: 100%;
	min-height: 100%;
}

/* Hide the Signature results initially */
.hidden {
	opacity: 0;
	visibility: hidden;
}

.visible {
	opacity: 1;
	visibility: visible;
}

.main-ui {
	background: #fefefe;
	height: 100vh;
	width: 100vw;
}

.container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text-input {
	-webkit-appearance: none;
	backface-visibility: hidden;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: none;
	clear: both;
	float: left;
	margin-bottom: 40px;
	padding: 10px;
	transition: border 0.3s, transform 0.3s;
	height: 30px;
	width: 400px;
}

.text-input:focus,
.text-input:hover {
	border: 1px solid purple;
	outline: none;
	transform: scale(1.1);
}

.show-signature {
	background: purple;
	border: none;
	border-radius: 50px;
	box-shadow: none;
	color: #fff;
	clear: both;
	float: left;
	padding: 20px;
	transition: background 0.3s, transform 0.3s;
	-webkit-appearance: none;
}

.show-signature:hover,
.show-signature:focus {
	background: #222;
	transform: scale(1.1);
}

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>WebDevStudios Email Signature Generator</title>
    <link rel='stylesheet' href='css/main.css'>

</head>
<body id="signature-generator">

<main class="main-ui container">

	<section class="input-container">
		<input type="text" placeholder="What's your name?" value="" id="name" class="text-input input-name">
		<input type="text" placeholder="What's your job title?" value="" id="job" class="text-input input-job">
		<button class="show-signature">Gimme My Signature</button>
	</section>

	<section class="results hidden">
		<!-- TABLE RESULTS BASED ON INPUTS -->

		<p class="name-result">Your name is </p>
		<p class="job-result">Your job is </p>

	</section>

</main>

<script src="js/main.js"></script>
</body>
</html>

Edit: My problem is that I want to have the name and job input values attached to the

content on button click, currently that isn't happening but I'm also not getting console errors.

Fiddle: https://jsfiddle/cdcampbell26/3z79ewhm/

var nameValue = document.querySelector( ".input-name" ).value;
var jobValue = document.querySelector( ".input-job" ).value;
var resultsBlock = document.querySelector( ".results" );
var resultName = document.querySelector( ".name-result" );
var resultJob = document.querySelector( ".job-result" );


function showSignature() {
    resultName.innerHTML += nameValue;

    resultJob.innerHTML += jobValue;

    resultsBlock.classList.remove( "hidden" );
}

document.querySelector( ".show-signature" ).addEventListener( 'click', function(){
    showSignature();
});

/* Main Styles for Email Signature Generator */
html, body {
	height: 100%;
	width: 100%;
	min-height: 100%;
}

/* Hide the Signature results initially */
.hidden {
	opacity: 0;
	visibility: hidden;
}

.visible {
	opacity: 1;
	visibility: visible;
}

.main-ui {
	background: #fefefe;
	height: 100vh;
	width: 100vw;
}

.container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text-input {
	-webkit-appearance: none;
	backface-visibility: hidden;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: none;
	clear: both;
	float: left;
	margin-bottom: 40px;
	padding: 10px;
	transition: border 0.3s, transform 0.3s;
	height: 30px;
	width: 400px;
}

.text-input:focus,
.text-input:hover {
	border: 1px solid purple;
	outline: none;
	transform: scale(1.1);
}

.show-signature {
	background: purple;
	border: none;
	border-radius: 50px;
	box-shadow: none;
	color: #fff;
	clear: both;
	float: left;
	padding: 20px;
	transition: background 0.3s, transform 0.3s;
	-webkit-appearance: none;
}

.show-signature:hover,
.show-signature:focus {
	background: #222;
	transform: scale(1.1);
}

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>WebDevStudios Email Signature Generator</title>
    <link rel='stylesheet' href='css/main.css'>

</head>
<body id="signature-generator">

<main class="main-ui container">

	<section class="input-container">
		<input type="text" placeholder="What's your name?" value="" id="name" class="text-input input-name">
		<input type="text" placeholder="What's your job title?" value="" id="job" class="text-input input-job">
		<button class="show-signature">Gimme My Signature</button>
	</section>

	<section class="results hidden">
		<!-- TABLE RESULTS BASED ON INPUTS -->

		<p class="name-result">Your name is </p>
		<p class="job-result">Your job is </p>

	</section>

</main>

<script src="js/main.js"></script>
</body>
</html>

Share Improve this question edited Nov 30, 2017 at 17:29 asked Nov 30, 2017 at 17:22 bezierer 3885 silver badges13 bronze badges

@zero298 I just made an edit to make it more clear: Basically my problem is that I want to have the name and job input values attached to the <p> content on button click, currently that isn't happening but I'm also not getting console errors. – bezierer Commented Nov 30, 2017 at 17:30
I'm sorry, I read that as "I'm getting console errors" and that you didn't list them. My bad. – zero298 Commented Nov 30, 2017 at 17:33

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

The problem with your code is just that you are getting the value on initialization on lines 1 and 2 and assigning them to those variables.

when you do input.value value is the final value, if you change the input content on the browser, the previously assigned value will not change.

if you want some dynamic value you will have to postpone its query to the moment when you want it.

So given your code, the solution would just be like this:

var nameInput = document.querySelector( ".input-name" );
var jobInput = document.querySelector( ".input-job" );
var resultsBlock = document.querySelector( ".results" );
var resultName = document.querySelector( ".name-result" );
var resultJob = document.querySelector( ".job-result" );


function showSignature() {
    resultName.innerHTML += nameInput.value;

    resultJob.innerHTML += jobInput.value;

    resultsBlock.classList.remove( "hidden" );
}

Here's a link to jsfiddle showing it running https://jsfiddle/cdcampbell26/3z79ewhm/

You're retrieving the value on page load. You should retrieve it when the button is clicked.

function showSignature() {
    var nameValue = document.querySelector( ".input-name" ).value;
    var jobValue = document.querySelector( ".input-job" ).value;
    var resultsBlock = document.querySelector( ".results" );
    var resultName = document.querySelector( ".name-result" );
    var resultJob = document.querySelector( ".job-result" );
    
    resultName.innerHTML += nameValue;

    resultJob.innerHTML += jobValue;

    resultsBlock.classList.remove( "hidden" );
}

document.querySelector( ".show-signature" ).addEventListener( 'click', function(){
    showSignature();
});

/* Main Styles for Email Signature Generator */
html, body {
	height: 100%;
	width: 100%;
	min-height: 100%;
}

/* Hide the Signature results initially */
.hidden {
	opacity: 0;
	visibility: hidden;
}

.visible {
	opacity: 1;
	visibility: visible;
}

.main-ui {
	background: #fefefe;
	height: 100vh;
	width: 100vw;
}

.container {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.text-input {
	-webkit-appearance: none;
	backface-visibility: hidden;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: none;
	clear: both;
	float: left;
	margin-bottom: 40px;
	padding: 10px;
	transition: border 0.3s, transform 0.3s;
	height: 30px;
	width: 400px;
}

.text-input:focus,
.text-input:hover {
	border: 1px solid purple;
	outline: none;
	transform: scale(1.1);
}

.show-signature {
	background: purple;
	border: none;
	border-radius: 50px;
	box-shadow: none;
	color: #fff;
	clear: both;
	float: left;
	padding: 20px;
	transition: background 0.3s, transform 0.3s;
	-webkit-appearance: none;
}

.show-signature:hover,
.show-signature:focus {
	background: #222;
	transform: scale(1.1);
}

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>WebDevStudios Email Signature Generator</title>
    <link rel='stylesheet' href='css/main.css'>

</head>
<body id="signature-generator">

<main class="main-ui container">

	<section class="input-container">
		<input type="text" placeholder="What's your name?" value="" id="name" class="text-input input-name">
		<input type="text" placeholder="What's your job title?" value="" id="job" class="text-input input-job">
		<button class="show-signature">Gimme My Signature</button>
	</section>

	<section class="results hidden">
		<!-- TABLE RESULTS BASED ON INPUTS -->

		<p class="name-result">Your name is </p>
		<p class="job-result">Your job is </p>

	</section>

</main>

<script src="js/main.js"></script>
</body>
</html>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745219690a4617188.html

How to get form input value on button click in Vanilla JavaScript? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

How to get form input value on button click in Vanilla JavaScript? - Stack Overflow

2 Answers 2

相关推荐