I am creating an image gallery in javascript and I wrote some functions for it. When I click the "add" button, a window opens to select a file and a "<img>" tag is created in my relevant container, but how do I automatically put the src of the SELECTED image in my img tag?
my codes;
<!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">
<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=Roboto+Mono:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Gallery</title>
</head>
<body>
<div class="container">
<h1>Gallery</h1>
<button id="addButton">Add</button>
<div id="containerImage" class="container-image"></div>
</div>
<script src="app.js"></script>
</body>
</html>
let addButton = document.querySelector("#addButton");
let imageContainer = document.querySelector("#containerImage");
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.click();
});
addButton.addEventListener('click',function(){
let image = document.createElement('img');
imageContainer.appendChild(image);
image.className="resim";
});
Im new to javascript and I'm trying to do small small projects
i tried ;
image.src = URL.createObjectURL(image)
addButton.addEventListener('click', function () {
let input = document.createElement('input');
input.type = "file";
input.addEventListener('change', function () {
let image = document.createElement('img');
image.className = "resim";
image.src = URL.createObjectURL(input.files[0]);
imageContainer.appendChild(image);
});
input.click();
});
Related
I am trying to use HTML 'input' to change apiData.id value. I'm new to javascript and not sure if this is correct. Any suggestions would be greatly appreciated.
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '76',
}
const input = document.getElementById('container');
const newId = apiData.id;
function eventController(event) {
newId = event.target.value;
}
input.addEventListener('change', eventController, false);
<!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>Pokemon</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<input id="input">
<input type="submit" value="Catch">
</div>
<div class="pokemon"></div>
<script src="main.js"></script>
</body>
</html>
newId is const, so you cannot assign it with a new value after it has been declared.
But even if you could (and you can, by making it a variable), that would not affect apiData.id, as newId is assigned with the value of apiData.id, but they are not bound together.
You should just assign apiData.id directly with a new value:
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '76',
}
const input = document.getElementById('container');
// const newId = apiData.id;
function eventController(event) {
apiData.id = event.target.value;
}
input.addEventListener('change', eventController, false);
<!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>Pokemon</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<input id="input">
<input type="submit" value="Catch">
</div>
<div class="pokemon"></div>
<script src="main.js"></script>
</body>
</html>
How i'm supposed to select my element that have been created by function. First function is working well, but while i'm trying to select the element that been created in that function, it doesn't work
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
});
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>
That's because you are attempting to attach a click event to your paragraph tag before its ever been added to the DOM.
You will need to move this new event listener inside of your onclick and after you append it to your .body div.
Example:
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
document.querySelector("p").addEventListener("click", function () {
console.log("Hi");
});
});
As requested, here is how you could just split some of this out to be its own methods for clarity. Feel free to use your own style as its just an example:
const onClickLop = (e) => {
const el = document.createElement("p");
const bodyDiv = document.querySelector(".body");
el.appendChild(document.createTextNode("lopas"));
bodyDiv.appendChild(el);
el.addEventListener("click", onClickLopas);
};
const onClickLopas = (e) => {
console.log("Hi");
});
document.querySelector(".lop").addEventListener("click", onClickLop);
Problem:
You create the p element at the moment when you click on .lop
You try to add the event listener at the page load. At this point there is no p tag at all.
Solution:
Add the event listener after you created the p tag.
You could also use the reference c instead of querySelector.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function() {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
body.appendChild(c);
c.addEventListener("click", function() {
console.log("Hi");
});
});
<!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>Document</title>
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
</body>
</html>
The code to add the event listener for the p element is executing before your code that creates it. Move the event handler into the first function so that it isn't triggered until the element is created and added to the document. However, that will mean that each time you click the first element, a new p will be created with its own handler (separate question/answer).
Also, by doing that you can consolidate some code.
let d = document.querySelector(".lop");
let body = document.querySelector(".body");
d.addEventListener("click", function () {
let c = document.createElement("p");
c.appendChild(document.createTextNode("lopas"));
c.addEventListener("click", function () {
console.log("Hi");
});
body.appendChild(c);
});
<!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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="lop">s</div>
<div class="body"></div>
<script src="script.js"></script>
</body>
</html>
it's really strange, but my iFrame innerHTML doesn't accept some fonts.
Here is an example of my code:
This font works:
Head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Comforter&display=swap" rel="stylesheet">
Body:
<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
function onLoad() {
richTextFeld.document.designMode = 'On';
richTextFeld.document.body.style.fontFamily = "'Comforter', cursive";
richTextFeld.document.body.style.fontSize = "16px";
richTextFeld.document.body.style.color = "#ff0000";
richTextFeld.document.body.innerHTML = "Some Text";
}
</script>
And this font doesn't work (I have marked the two differences with two **):
Head:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Raleway:wght#200&display=swap" rel="stylesheet">**
Body:
<iframe id="textBox" name="richTextFeld"></iframe>
<script type="text/javascript">
function onLoad() {
richTextFeld.document.designMode = 'On';
**richTextFeld.document.body.style.fontFamily = "'Raleway', sans-serif";**
richTextFeld.document.body.style.fontSize = "16px";
richTextFeld.document.body.style.color = "#ff0000";
richTextFeld.document.body.innerHTML = "Some Text";
}
</script>
I really don't understand why the font below doesn't work, do you have an idea?
Edit: In the inspector Raleway is displayed as font, but the displayed font on the site is different (see image below).
Image
Here is how you can change the font:
<iframe id="textBox" name="iFrameName"></iframe>
Import a font:
iFrameName.document.body.innerHTML = "<style>#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');*{font-family:'Raleway',sans-serif;}</style>Some Text";
Use a installed font:
iFrameName.document.body.fontFamily = "Arial";
// I'm trying to create div elements using a FOR loop but the event is not fired, although I found a solution, I wanna know why the event isn't fired
// load event here is not fired
document.addEventListener('load', () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
});
// Random Text
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<title>Javascript Test run</title>
</head>
<body>
<header>
<h1 class="h1">Etch-A-Sketch</h1>
</header>
<main>
<--! Therefore DOM elements aren't created inside this div !-->
<div class="container"></div>
</main>
</div>
<script src="/main.js"></script>
</body>
</html>
// Random Text
Try with window.onload
window.onload = () => {
for (i = 0; i <= 32; i++) {
let gridSquare = document.createElement('div');
gridSquare.className = 'grid-square'
document.querySelector('.container').appendChild(gridSquare);
console.log(gridSquare,i)
}
}
I am trying to create buttons that can be moved throughout the page but everything I have tried isn't working for me.
Even running the example on: Move buttons on a page using JavaScript
does not work.
So far my javascript file is only able to create the buttons that I need:
function add(text) {
console.log("New button with text: "+ text);
var word = document.createElement("button");
word.type = "button";
word.id = "magnet";
word.draggable = true;
word.value = text;
word.onclick = "dragstart(event);";
var fridge = document.getElementById("poem");
//fridge.appendChild(word);
word.appendChild(document.createTextNode(text));
fridge.appendChild(word);
$("#addbutton").val(""); }
Can someone explain how to move a button using clientX and clientY?
This is my html file...
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="poetry.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="text" id="addbutton">
<button type="button" onclick="add(addbutton.value);">Add Word</button>
<div id="poem"></div>
</body>