Question

我正试图摆脱jQuery，但却陷入了一些看似简单的事情：我只想在单击按钮时用输入值更新段落文本。我没有收到控制台错误，但由于输入值没有通过，我不知道我在哪里搞乱。

编辑：我的问题是我希望在按钮点击时附加

内容的名称和作业输入值，目前尚未发生，但我也没有收到控制台错误。

小提琴：https://jsfiddle.net/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>

Answer 1

您的代码的问题只是您在第1行和第2行获得初始化值并将它们分配给这些变量。

当input.value值为最终值时，如果更改浏览器上的输入内容，则先前分配的值不会更改。

如果您想要一些动态值，则必须将其查询推迟到您想要的时刻。

所以考虑到你的代码，解决方案就是这样：

＆＃13;

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" );
}

＆＃13;

这是指向jsfiddle的链接，显示它正在运行https://jsfiddle.net/cdcampbell26/3z79ewhm/

Answer 2

您正在检索页面加载时的值。单击按钮时应该检索它。

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>

如何在Vanilla JavaScript中点击按钮获取表单输入值？

2 个答案: