我已經(jīng)創(chuàng)建了一個(gè)索引文件,這樣在這里輸入的信息就會(huì)添加到創(chuàng)建的元素中 這是復(fù)習(xí)部分 index.html文件在這里,包括CSS和js
let name = document.querySelector('.name').value;
let message = document.querySelector('.message').value;
let btn = document.getElementById('button');
let div = document.querySelector('.items')
btn.addEventListener('click', ()=>{
let item = document.createElement('div')
let inner = `
<h3>${name}</h3>
<p>${message}</p>
`
item.className = "message-item"
item.innerHTML = inner
div.append(item)
});
html, body{
padding: 0;
margin: 0;
}
.msg{
padding: 2em;
margin: 2em;
border-radius: 2vh;
height: 70vh;
display: flex;
align-items: center;
justify-content: left;
flex-direction: column;
background-color: #1e90ff;
}
.items{
height: 65vh;
overflow: scroll;
color: white;
width: 100%;
overflow-x: hidden;
margin: 10px;
}
input{
padding: 10px;
border: none;
border-radius: 8px;
outline: none;
font-size: 1em;
}
#button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.message-item{
background-color: black;
padding: 1em;
border-radius: 8px;
margin: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="msg">
<div class="items"></div>
<div class="input">
<input type="text" class="name" placeholder="Name">
<input type="text" class="message" placeholder="Message">
<button id="button">Submit</button>
<button type="reset">Reset</button>
</div>
</div>
</body>
</html>
你的名字變量應(yīng)該是指向元素的指針,而不是值。
此外,您應(yīng)該在添加后清除輸入。
const
name = document.querySelector('.name'),
message = document.querySelector('.message'),
btn = document.getElementById('button'),
div = document.querySelector('.items');
const handleAdd = (e) => {
div.insertAdjacentHTML('beforeend', `
<div class="message-item">
<h3>${name.value}</h3>
<p>${message.value}</p>
</div>
`);
name.value = ''; // Clear name
message.value = ''; // Clear message
};
btn.addEventListener('click', handleAdd);
html,
body {
padding: 0;
margin: 0;
}
.msg {
padding: 2em;
margin: 2em;
border-radius: 2vh;
height: 70vh;
display: flex;
align-items: center;
justify-content: left;
flex-direction: column;
background-color: #1e90ff;
}
.items {
height: 65vh;
overflow: scroll;
color: white;
width: 100%;
overflow-x: hidden;
margin: 10px;
}
input {
padding: 10px;
border: none;
border-radius: 8px;
outline: none;
font-size: 1em;
}
#button {
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.button {
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.message-item {
background-color: black;
padding: 1em;
border-radius: 8px;
margin: 3px;
}
<div class="msg">
<div class="items"></div>
<div class="input">
<input type="text" class="name" placeholder="Name">
<input type="text" class="message" placeholder="Message">
<button id="button">Submit</button>
<button type="reset">Reset</button>
</div>
</div>
你需要在每次點(diǎn)擊提交按鈕時(shí)得到你的輸入值,而不僅僅是在頁(yè)面加載時(shí)一次,而且當(dāng)你點(diǎn)擊重置按鈕時(shí)你需要清除你的輸入
let btn = document.getElementById('button');
let reset = document.getElementById('reset');
let div = document.querySelector('.items')
btn.addEventListener('click', () => {
let name = document.querySelector('.name').value;
let message = document.querySelector('.message').value;
let item = document.createElement('div')
let inner = `
<h3>${name}</h3>
<p>${message}</p>
`
item.className = "message-item"
item.innerHTML = inner;
div.append(item)
});
reset.addEventListener('click', () => {
let name = document.querySelector('.name').value = '';
let message = document.querySelector('.message').value = '';
});
html, body{
padding: 0;
margin: 0;
}
.msg{
padding: 2em;
margin: 2em;
border-radius: 2vh;
height: 70vh;
display: flex;
align-items: center;
justify-content: left;
flex-direction: column;
background-color: #1e90ff;
color: white;
}
.items{
height: 65vh;
overflow: scroll;
color: white;
width: 100%;
overflow-x: hidden;
margin: 10px;
}
input{
padding: 10px;
border: none;
border-radius: 8px;
outline: none;
font-size: 1em;
}
#button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.message-item{
background-color: black;
padding: 1em;
border-radius: 8px;
margin: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="msg">
<div class="items"></div>
<div class="input">
<input type="text" class="name" placeholder="Name">
<input type="text" class="message" placeholder="Message">
<button id="button">Submit</button>
<button id="reset">Reset</button>
</div>
</div>
</body>
</html>
您可以在輸入被填充之前從輸入中獲取值。它們只是字符串值,不會(huì)隨著輸入的變化而動(dòng)態(tài)更新。
我把這幾行移到了函數(shù)內(nèi)部,這樣你每次點(diǎn)擊按鈕都會(huì)得到最新的數(shù)據(jù)。
let btn = document.getElementById('button');
btn.addEventListener('click', ()=>{
let name = document.querySelector('.name').value;
let message = document.querySelector('.message').value;
let div = document.querySelector('.items')
let item = document.createElement('div')
let inner = `
<h3>${name}</h3>
<p>${message}</p>
`
item.className = "message-item"
item.innerHTML = inner
div.append(item)
});
html, body{
padding: 0;
margin: 0;
}
.msg{
padding: 2em;
margin: 2em;
border-radius: 2vh;
height: 70vh;
display: flex;
align-items: center;
justify-content: left;
flex-direction: column;
background-color: #1e90ff;
}
.items{
height: 65vh;
overflow: scroll;
color: white;
width: 100%;
overflow-x: hidden;
margin: 10px;
}
input{
padding: 10px;
border: none;
border-radius: 8px;
outline: none;
font-size: 1em;
}
#button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.button{
padding: 10px 20px;
border-radius: 8px;
border: none;
font-size: 1em;
}
.message-item{
background-color: black;
padding: 1em;
border-radius: 8px;
margin: 3px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="msg">
<div class="items"></div>
<div class="input">
<input type="text" class="name" placeholder="Name">
<input type="text" class="message" placeholder="Message">
<button id="button">Submit</button>
<button type="reset">Reset</button>
</div>
</div>
</body>
</html>