Basically I need to load dynamically buttons into div and display them.
this is the code I have so far.
The problem is that I need to display it inside of div, because I need to show them in this way (like in the picture).
I tried with onload but apparently it doesn't work with div (<div id="from" onload="printBtn()">)
when i tried with iframe, the buttons shows in the wrong place.
how can i fix it?
var uniqfrom = ["Tel-Aviv", "Amsterdam", "New York", "London"];
function printBtn() {
for (var i = 0; i < uniqfrom.length; i++) {
var btn = document.createElement("button");
var t = document.createTextNode(uniqfrom[i]);
btn.appendChild(t);
document.body.appendChild(btn);
}
}
body,
div {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 500px;
}
#to,
#controls,
#from {
float: left;
width: 30%;
height: 100%
}
#from {
background-color: yellow;
}
#to {
background-color: orange;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
margin: 0 auto;
background-color: blue;
display: block;
color: white;
}
h1 {
text-align: center;
}
.sel {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container">
<div id="from">
</div>
<div id="to">
</div>
</div>
</body>
</html>
Get the DIVs that you want to put the buttons into, and append the buttons there instead of document.body.
var uniqfrom = ["Tel-Aviv", "Amsterdam", "New York", "London"];
function printBtn() {
let from = document.getElementById("from");
let to = document.getElementById("to");
for (var i = 0; i < uniqfrom.length; i++) {
var btn = document.createElement("button");
var t = document.createTextNode(uniqfrom[i]);
btn.appendChild(t);
from.appendChild(btn);
if (i > 0) {
btn = btn.cloneNode(true);
to.appendChild(btn);
}
}
}
printBtn();
body,
div {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 500px;
}
#to,
#controls,
#from {
float: left;
width: 30%;
height: 100%
}
#from {
background-color: yellow;
}
#to {
background-color: orange;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
margin: 0 auto;
background-color: blue;
display: block;
color: white;
}
h1 {
text-align: center;
}
.sel {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container">
<div id="from">
</div>
<div id="to">
</div>
</div>
</body>
</html>
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!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>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
I'm trying to make my own custom UI for a video player. It will include a options toggle button which will open a options container. The options container should not close when the user clicks anything within the container and the options toggle should toggle correctly. How can I make the options container hide when the user clicks else where on the screen? Thanks
I will also be inserting a number of video players in a single document.
var oc = document.querySelector(".options_container"),
ot = document.querySelector(".options_toggle");
oc.style.visibility = "hidden";
ot.onclick = function() {
if (oc.style.visibility == "hidden") oc.style.visibility = "visible";
else oc.style.visibility = "hidden";
};
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You may try like this:
$(document).ready(function(){
$('.options_toggle').click(function(event){
event.stopPropagation();
$(".options_container").slideToggle("fast");
});
$(".options_container").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".options_container").hide();
});
body {
margin: 0;
padding: 0;
}
.container {
width: 95%;
height: 250px;
border: 1px solid black;
display: block;
margin: 15px;
position: relative;
}
.container .options_container {
width: 200px;
height: 150px;
background-color: skyblue;
position: absolute;
bottom: 50px;
right: 5px;
display:none;
}
.container .bar {
width: 100%;
height: 45px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
.container .bar img {
width: 30px;
height: 30px;
float: right;
margin: 7.5px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<div class="options_container"></div>
<div class="bar">
<img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png">
</div>
</div>
</body>
</html>
You can register a function to listen on click event. If the user clicks anywhere on the screen which is not container then it will close all the containers. You can further modify the function to implement more complex validation.
function closeContainers() {
// Get all the containers
let containers = document.getElementsByClassName("container");
// If the user hasn't clicked on the current container then remove the visibility
containers.forEach(function (container) {
if (container.classList.contains('visible')) {
container.classList.remove('visible');
}
})
}
// Close the container if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.container')) {
closeContainers();
}
}
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>
I want to make the delete button that I've added to every li element to delete the exact element that he represents.
My code only removes the first child of the parent node.
I hope you guys understand what I want :)
window.onload = function(){
document.getElementById("form").onsubmit = addElementsToList;
//creating the function that adds elements to the unordered list
function addElementsToList() {
var liElements = document.createElement("LI");
var textNode = document.createTextNode(document.getElementById('text').value);
var input = document.createElement("INPUT");
var button = document.createElement("INPUT");
button.setAttribute("type", "button");
input.setAttribute("type", "checkbox");
liElements.className = "li";
input.className = "checkbox";
button.value = "Delete";
button.className = "btn";
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length - 1; i++) {
btn[i].id = "btn";
}
console.log(btn);
console.log(btn.length)
liElements.appendChild(textNode);
liElements.appendChild(input);
liElements.appendChild(button);
var paragraph1 = document.getElementById("elements").firstChild;
document.getElementById("elements").insertBefore(liElements,paragraph1);
//toggle done class
var elementClasses = liElements.classList;
function onCheckBoxChange() {
liElements.addEventListener("change", function() {
liElements.classList.toggle("done");
});
}
button.onclick = removeElement;
//function that removes the element
function removeElement() {
var list = document.getElementById('elements');
list.removeChild(list.childNodes[0]);
}
onCheckBoxChange();
return false;
}
};
body {
background: #f9bc02;
}
#container {
background: #fb9902;
width: 60%;
margin:20px auto;
overflow: auto;
padding: 20px;
}
#form {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
#text {
width:75%;
height:50px;
border:0;
border-radius: 15px;
background-color: #fff;
text-align: center;
}
#submit {
width:20%;
height:50px;
border: 0;
background-color: #fff;
border-radius: 15px;
cursor:pointer;
}
#ul_elements {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
header {
text-align: center;
margin: 0 auto;
}
li {
text-align: left;
display: block;
}
.li{
color:#fff;
text-align: left;
font-size: 35px;
font-weight: bolder;
max-width: 65%;
padding-top: 10px;
padding-bottom: 10px;
}
.checkbox {
width:30px;
height:30px;
position: absolute;
left:60%;
}
.done {
color:green;
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>ToDoList_2</title>
<meta charset="UTF-8">
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<body>
<div id="container">
<header>
<h1>To do list</h1>
</header>
<form id="form">
<input type="text" id="text" value="Type here!" class="input">
<input type="submit" value="Submit" id="submit" class="input">
</form>
<div id="ul_elements">
<ul id="elements">
</ul>
</div>
</div>
</body>
</html>
Use event to get target element to delete exact element. Try below code.
window.onload = function(){
document.getElementById("form").onsubmit = addElementsToList;
//creating the function that adds elements to the unordered list
function addElementsToList() {
var liElements = document.createElement("LI");
var textNode = document.createTextNode(document.getElementById('text').value);
var input = document.createElement("INPUT");
var button = document.createElement("INPUT");
button.setAttribute("type", "button");
input.setAttribute("type", "checkbox");
liElements.className = "li";
input.className = "checkbox";
button.value = "Delete";
button.className = "btn";
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length - 1; i++) {
btn[i].id = "btn";
}
console.log(btn);
console.log(btn.length)
liElements.appendChild(textNode);
liElements.appendChild(input);
liElements.appendChild(button);
var paragraph1 = document.getElementById("elements").firstChild;
document.getElementById("elements").insertBefore(liElements,paragraph1);
//toggle done class
var elementClasses = liElements.classList;
function onCheckBoxChange() {
liElements.addEventListener("change", function() {
liElements.classList.toggle("done");
});
}
button.onclick = removeElement;
//function that removes the element
function removeElement(event) {
var list = document.getElementById('elements');
list.removeChild(event.target.parentElement);
}
onCheckBoxChange();
return false;
}
};
body {
background: #f9bc02;
}
#container {
background: #fb9902;
width: 60%;
margin:20px auto;
overflow: auto;
padding: 20px;
}
#form {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
#text {
width:75%;
height:50px;
border:0;
border-radius: 15px;
background-color: #fff;
text-align: center;
}
#submit {
width:20%;
height:50px;
border: 0;
background-color: #fff;
border-radius: 15px;
cursor:pointer;
}
#ul_elements {
background: #fb9902;
width: 50%;
margin:20px auto;
padding: 20px;
}
header {
text-align: center;
margin: 0 auto;
}
li {
text-align: left;
display: block;
}
.li{
color:#fff;
text-align: left;
font-size: 35px;
font-weight: bolder;
max-width: 65%;
padding-top: 10px;
padding-bottom: 10px;
}
.checkbox {
width:30px;
height:30px;
position: absolute;
left:60%;
}
.done {
color:green;
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>ToDoList_2</title>
<meta charset="UTF-8">
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<body>
<div id="container">
<header>
<h1>To do list</h1>
</header>
<form id="form">
<input type="text" id="text" value="Type here!" class="input">
<input type="submit" value="Submit" id="submit" class="input">
</form>
<div id="ul_elements">
<ul id="elements">
</ul>
</div>
</div>
</body>
</html>