admin管理员组

文章数量:1415111

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>

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

  • javascript
Share Improve this question edited Nov 30, 2017 at 17:29 bezierer asked Nov 30, 2017 at 17:22 beziererbezierer 3885 silver badges13 bronze badges 2
  • @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

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>

本文标签： How to get form input value on button click in Vanilla JavaScriptStack Overflow

版权声明：本文标题：How to get form input value on button click in Vanilla JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745219689a2648334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。