const form = document.querySelector('#memeForm');
const imageInput = document.querySelector('#imageURL');
const topText = document.querySelector('#textOnTop');
const bottomText = document.querySelector('#textOnBottom');
const results = document.querySelector('#results');
form.addEventListener('submit', function(e) {
e.preventDefault();
const meme = document.createElement('div');
const image = document.createElement('img');
const textTop = document.createElement('div');
const textBottom = document.createElement('div');
const removeBtn = document.createElement('button');
//allows file to be read by the DOM as an image?
image.src = imageInput.value;
textTop.classList.add('textTop');
textTop.innerHTML = topText.value;
textBottom.classList.add('textBottom');
textBottom.innerHTML = bottomText.value;
//allows the button created in line 16 and appended to the 'meme' div in line 40 to remove all contained within the parent 'meme' div
removeBtn.innerText = "Delete Meme";
removeBtn.addEventListener('click', function(e) {
e.target.parentElement.remove();
});
//Does classList.add allow the append methods that follow to be added to 'meme'?
meme.classList.add('meme');
meme.append(image);
meme.append(textTop);
meme.append(textBottom);
meme.append(removeBtn);
//appends ALL meme inputs to the specified location(section tag)?
results.append(meme);
//clears form's inputs once form is submitted
form.reset();
});
//cool and colorful mousemove feature!
document.addEventListener('mousemove', function(e) {
// console.log('e.pageX, e.pageY');
const r = Math.round(e.pageX * 255 / window.innerWidth);
const b = Math.round(e.pageY * 255 / window.innerHeight);
const color = `rgb(${r}, 0, ${b})`;
document.body.style.backgroundColor = color;
});h1 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
h4 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
label {
font-weight: bolder;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.meme {
position: relative;
}
.textTop {
position: absolute;
top: 30px;
right: 200px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
z-index: 2;
font-size: 40px;
}
.textBottom {
position: absolute;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 40px;
z-index: 2;
bottom: 100px;
}
.meme image {
max-width: 100%;
z-index: 1;
}
input {
width: 50%;
box-sizing: border-box;
margin-bottom: 20px;
}
.submitBtn {
width: 12%;
float: right;
}<!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>Meme Generator</title>
<link rel="stylesheet" href="meme.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<div>
<h1>Meme Generator</h1>
<h4>Fill out the form to start creating memes!</h4>
</div>
<form action="" id="memeForm">
<p>
<label for=""> Image URL
<input type="url" placeholder="What's the URL for your meme?" id="imageURL">
</label>
</p>
<p>
<label for=""> Text on Top
<input type="text" placeholder="(Optional) What text do you want at the top of your meme?" id="textOnTop">
</label>
</p>
<p>
<label for=""> Text on Bottom
<input type="text" placeholder="(Optional) What text do you want at the bottom of your meme?" id="textOnBottom">
</label>
</p>
<p>
<input type="submit" value="Create Meme!" class="submitBtn"></input>
</p>
</form>
<!-- saw many people use canvas but when I tried to use that tag my image wouldn't load -->
<div id="results"></div>
<script src="meme.js"></script>
</body>
</html>此處的第一篇文章和一個相對較新的編碼器，所以請耐心等待。
我一直在研究這個模因生成器，到目前為止，它可以獲取影像 URL 和文本，并將它們添加到指定的 div 中，從而產生一些看起來像模因的東西。
我有兩個主要問題：
Once I fill in the inputs and press the "Create Meme!" button, the image and text are appended to their respective and elements contained within the "meme" div but I'm not able to create another meme until I delete the meme using the "Delete Meme" button I've created in my js file. Essentially, the "Create Meme!" button is not clickable once a meme has been generated. One of the goals of this project is for a user to add multiple memes to the page by submitting the form multiple times.
I can't figure out how to position the text that is shown on the top and bottom of the image correctly. I'm sure if I were to play with the positioning in CSS more it would look more like a standard meme but I'd rather have the text be automatically centered in the top and bottom of the image. For example, if I adjust the size of the page the image and text don't adjust along with it.
Please let me know if I can provide more clarity on my issue, I've been stuck here since last night and my googling efforts are becoming more and more futile.
uj5u.com熱心網友回復：
點擊按鈕的問題是你的 div 覆寫了按鈕，所以當你點擊時，你點擊的是 div，而不是按鈕。
對于布局，有很多方法可以解決。一種方法是使用一些相對和絕對定位。
.wrapper {
position: relative;
width: 80%;
}
.wrapper p {
position: absolute;
left: 0;
text-align: center;
width: 100%;
font-size: 1.4em;
}
.wrapper img {
width: 100%;
}
.wrapper p.top {
top: 0;
}
.wrapper p.bottom {
bottom: 0;
}<div class="wrapper">
<p class="top">Hello World</p>
<img src="http://placekitten.com/400/300" />
<p class="bottom">Bacon Bacon Bacon Bacon Bacon Bacon Bacon Bacon</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/391065.html
標籤：javascript css forms append addeventlistener
上一篇：連續加載檔案多次(n)導致我的訊息框訊息顯示(n)次
下一篇：提交表單時對表單元素的參考為空