效果展示
初始画面
提交内容后画面(按键按下)
代码区
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 表白墙</ title>
</ head>
< style>
* {
margin : 0px;
padding : 0px;
}
.total {
width : 400px;
margin : 0px auto;
}
h1 {
text-align : center;
padding-bottom : 30px;
}
p {
text-align : center;
color : gray;
}
.div1 {
display : flex;
justify-content : center;
align-items : center;
padding-top : 5px;
}
span {
width : 80px;
height : 30px;
}
#edit {
width : 200px;
height : 30px;
}
.submit {
width : 280px;
height : 30px;
background-color : rgba ( 248, 236, 7, 0.942) ;
border : none;
border-radius : 5px;
}
.submit:active {
background-color : grey;
}
</ style>
< body>
< div class = " total" >
< h1> 表白墙</ h1>
< p> 输入后请点击提交,会将信息显示在表格中</ p>
< div class = " div1" >
< span> 谁:</ span> < input id = " edit" class = " who" type = " text" >
</ div>
< div class = " div1" >
< span> 对谁:</ span> < input id = " edit" class = " ofwho" type = " text" >
</ div>
< div class = " div1" >
< span> 说什么</ span> < input id = " edit" class = " what" type = " text" >
</ div>
< div class = " div1" >
< input class = " submit" type = " button" value = " 提交" onclick = " submit()" >
</ div>
</ div>
</ body>
< script>
function submit ( ) {
let containDiv = document. querySelectorAll ( '#edit' )
console. dir ( containDiv)
let from = containDiv[ 0 ] . value
let to = containDiv[ 1 ] . value
let message = containDiv[ 2 ] . value
console. log ( from + '对' + to+ '说' + message)
let nodeDiv = document. createElement ( 'div' )
nodeDiv. className = 'div1'
nodeDiv. innerHTML = from + '对' + to+ '说' + message
console. log ( nodeDiv)
let nodeparent = document. querySelector ( '.total' )
nodeparent. appendChild ( nodeDiv)
}
</ script>
</ html>