Как получить значение ввода формы по нажатию кнопки в Vanilla JavaScript?

1

Я пытаюсь отойти от jQuery, но застрял на чем-то, что кажется таким простым: я просто хочу обновить текст абзаца входными значениями при нажатии кнопки. Я не получаю консольные ошибки, но не уверен, где я запутался, поскольку входные значения не проходят.

Edit: Моя проблема в том, что я хочу, чтобы имя и значения ввода задания были прикреплены к

содержимое на кнопку щелчка, в настоящее время это не происходит, но я также не получаю консольные ошибки.

Скрипт: 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 your name?" value="" id="name" class="text-input input-name">
		<input type="text" placeholder="What 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>
  • 0
    @zero298 zero298 Я только что внес правку, чтобы сделать ее более понятной: в основном моя проблема заключается в том, что я хочу, чтобы при нажатии кнопки добавлялись значения ввода имени и задания, в настоящее время этого не происходит, но я также не получаю консольных ошибок.
  • 0
    Извините, я прочитал это как "Я получаю ошибки консоли", а вы их не перечислили. Виноват.
Теги:

2 ответа

2
Лучший ответ

Проблема с вашим кодом заключается в том, что вы получаете значение при инициализации в строках 1 и 2 и присваиваете им эти переменные.

когда вы input.value значение input.value это конечное значение, если вы измените входной контент в браузере, ранее назначенное значение не изменится.

если вам нужно какое-то динамическое значение, вам придется отложить запрос до момента, когда вы этого захотите.

Поэтому, учитывая ваш код, решение будет выглядеть следующим образом:

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

Здесь ссылка на jsfiddle показывает, что она работает https://jsfiddle.net/cdcampbell26/3z79ewhm/

Поделиться
  • 0
    О, это имеет смысл - как плотно с моей стороны! Спасибо за быстрое указание на это :)
  • 0
    Если это решит проблему, можете ли вы пометить ответ как правильный?
Показать ещё 1 комментарий
1

Вы извлекаете значение при загрузке страницы. Вы должны получить его при нажатии кнопки.

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 your name?" value="" id="name" class="text-input input-name">
		<input type="text" placeholder="What 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню