我目前正在创建一个模因生成器应用程序，用户可以在其中提交图像以及顶部和底部文本。我想让它在提交表单后，将文本添加到图像上并使用 CSS 设置样式。我已经尝试向元素添加一个类并向其添加 css，但这不起作用。这是我的代码：JSlet form = document.querySelector('#meme-form');let img = document.querySelector('#img');let topTxt = document.querySelector('#top-txt');let bottomTxt = document.querySelector('#bottom-txt');form.addEventListener('submit', function(e) { e.preventDefault(); let memePic = document.createElement('img'); //create the divs for the memes let newDiv = document.createElement('div'); form.appendChild(newDiv); topTxt.classList.add('top') bottomTxt.classList.add('bottom') memePic.src = img.value; newDiv.append(memePic, topTxt.value, bottomTxt.value); //set the textbox inputs equal to nothing img.value = ''; topTxt.value = ''; bottomTxt.value= ''; })CSSdiv { width: 30%; height: 300px; margin: 10px; display: inline-block;}img { width: 100%; height: 100%; margin: 10px; display: inline-block;}.top{ color: blue;}#bottom-txt { color: red;}HTML<body> <form action="" id="meme-form"> <label for="image">img url here</label> <input id="img" type="url"><br> <label for="top-text">top text here</label> <input id="top-txt" type="text"><br> <label for="bottom-text">bottom text here</label> <input id="bottom-txt" type="text"><br> <input type="submit"><br> </form> <script src="meme.js"></script></body></html>
1 回答
汪汪一只猫
TA贡献1898条经验 获得超8个赞
您只需要修复一些元素在提交后的logic状态。appendedform
为此，您需要在您将持有您div之后，然后命令您进行展示。我还在每个显示之间添加了一条线。formresultselementhrseparatorresults
你可以style按照你希望的方式来设置你的元素——我已经添加了一些基本的CSS来显示一些样式和一个img仅用于演示目的的实际 url。
现场工作演示：
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
var hrLine = document.createElement('hr');
//create the divs for the memes
let newDiv = document.createElement('div');
let topText = document.createElement('span');
let bttomText = document.createElement('span');
//Top text
topText.classList.add('top')
topText.textContent = topTxt.value
//Img
memePic.src = img.value;
results.appendChild(topText);
results.append(memePic);
//bottom text
bttomText.classList.add('bottom')
bttomText.textContent = bottomTxt.value
results.append(bttomText);
results.append(hrLine);
//set the textbox inputs equal to nothing
//img.value = '';
topTxt.value = '';
bottomTxt.value = '';
})
.meme-results {
width: 30%;
height: 300px;
margin: 10px;
display: block;
}
img {
width: 100%;
height: 100%;
display: block;
}
.top, #top-txt {
color: blue;
}
.bottom, #bottom-txt {
color: red;
}
<html>
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url" value="https://via.placeholder.com/150"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<div class="meme-results"></div>
<script src="meme.js"></script>
</body>
</html>
添加回答
举报
0/150
提交
取消