js 输入框 按钮,点击按钮获取输入框值,并渲染到页面上
时间: 2024-03-01 13:51:18 浏览: 95
可以通过以下步骤实现在 JavaScript 中获取输入框的值并渲染到页面上:
1. 在 HTML 文件中创建一个输入框和一个按钮:
```html
<input type="text" id="input-box">
<button id="submit-btn">提交</button>
```
2. 在 JavaScript 文件中获取输入框和按钮元素:
```javascript
const inputBox = document.getElementById("input-box");
const submitBtn = document.getElementById("submit-btn");
```
3. 给按钮添加点击事件监听器,当按钮被点击时获取输入框的值:
```javascript
submitBtn.addEventListener("click", function() {
const inputValue = inputBox.value;
console.log(inputValue); // 在控制台中输出输入框的值
});
```
4. 将输入框的值渲染到页面上,可以创建一个新的元素来显示输入框的值,并将其添加到页面中:
```javascript
const inputBox = document.getElementById("input-box");
const submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
const inputValue = inputBox.value;
const resultEl = document.createElement("p");
resultEl.textContent = `你输入的值是:${inputValue}`;
document.body.appendChild(resultEl); // 将结果添加到页面中
});
```
这样,当用户在输入框中输入值并点击按钮时,页面上会显示一个新的段落元素,其中包含用户输入的值。
阅读全文