堆棧內存溢出
  簡體   English   中英

如何在Vanilla JavaScript中點擊按鈕獲取表單輸入值？

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

 原文  2017-11-30 17:22:56  3   2    javascript

問題描述

我試圖擺脫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>

2 個解決方案

解決方案1
 2 已采納  2017-11-30 17:32:02

您的代碼的問題只是您在第1行和第2行上獲得初始化值並將它們分配給這些變量。

當你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/

解決方案2
 1  2017-11-30 17:30:23

您正在檢索頁面加載時的值。 單擊按鈕時應檢索它。 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 vanilla JavaScript 中獲取動態輸入的值？ 如何在 Vuejs 或 vanila javascript 中單擊按鈕時獲取輸入字段值？ 在表單1中單擊按鈕：在表單2中更改隱藏輸入的值（純JavaScript） 如何獲得輸入按鈕點擊的價值？ 如何在 vanilla js 中自動獲取輸入值？ 如何從 vanilla javascript 中獲取 React 按鈕的點擊事件和 class 名稱？ 使用香草Javascript提交表單不包含AngularJS呈現的輸入值 如何在單擊下一個和上一個按鈕時增加和減少范圍 slider 輸入的值（香草 JavaScript） 使用Vanilla javascript單擊按鈕后，如何將值設置為html的輸入框並顯示？ 正確使用“ this”在表單內打印按鈕的值（使用原始Javascript）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM