So I'm trying to create my own To Do list just to learn javascript and I'm stuck.
I've managed to add a new div with the input that the user writes, but there's no design.
<div class="isDo"> // HTML code
<p id="newTask">Task 1</p>
<hr>
</div>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd;
document.getElementsByClassName("isDo")[0].appendChild(div);
}
When I used append paragraph instead of div it the design works, but I want to ad an <hr> tag for each input value.
What way can I add an entire div with paragraph and hr tag?
This should do the trick :)
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
<button id="btn" >add a tag</button>
<script>
function addTask() { // JavaScript Code
var div = document.createElement("div");
var taskAdd = document.getElementById("newTask").innerHTML;
//change the id of the el because taskAdd doesn't point to an element
div.innerHTML = `<p>${taskAdd}</p><hr>`;
//this is the part where you add the text in taskAdd and the hr tag
document.getElementsByClassName("isDo")[0].appendChild(div);
}
var btn = document.getElementById("btn")
.addEventListener("click", addTask);
</script>
</body>
</html>
`
Try this below :
<!DOCTYPE html>
<html>
<title>Test Code</title>
<head>
<script>
function addTask() {
var div = document.createElement("div");
var taskAdd = document.getElementById("taskAdd").value;
div.innerHTML = taskAdd + "<hr>";
document.getElementsByClassName("isDo")[0].appendChild(div);
}
</script>
</head>
<body>
<input id="taskAdd">
<button onclick="addTask()">Add</button>
<div class="isDo">
<p id="newTask">Task 1</p>
<hr>
</div>
</body>
</html>
Related
I need help with creating a div that when you click a button, the div with custom HTML inside gets created.
<html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
var template = `
<div class="block">
Hello World!
</div>
`
function createBlock() {
}
</script>
<button onclick="createBlock()">Create div</button>
</html>
If this is possible(it most likely is), I am making a post box thing.
Thanks!!!
are you looking for something like this?
var template = `
<div class="block">
Hello World!
</div>
`
function createBlock() {
let myDiv = document.createElement('div');
document.body.append(myDiv);
myDiv.outerHTML = template;
}
.block{ background: red }
<html>
<link rel="stylesheet" href="style.css">
<button onclick="createBlock()">Create div</button>
</html>
If you want put your template as a child inside new div you can change your createBlock like this:
function createBlock() {
let myDiv = document.createElement('div');
myDiv.innerHTML= template;
document.body.append(myDiv);
}
Instead of creating an element, a better way to do this (with the same effect) is hiding and then showing the element, like so:
#block {
display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="style.css">
<button onclick="createBlock()">Create div</button>
<div id="block">
Hello World!
</div>
<script type="text/javascript">
function createBlock() {
block = document.getElementById("block")
block.style.display = "block"
}
</script>
</body>
</html>
I have an input that allows me to add new <p> elements using java script, I also have <p> elements added in html. I have very simple onclick function, and it works just fine on elements added in html, but newly added elements ignore it.
var input = document.getElementById("input")
var button = document.getElementById("button");
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";}
function clik(elem)
{
elem.style.color = "green";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="input"></input>
<button type="button" id="button"> add </button>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
</body>
</html>
I tried:
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";
p.onclick=clik(p);}
but then it's always green, and I want to make it green onclick.
You don't set the event click handler on your new item. You could do it like this:
var input = document.getElementById("input")
var button = document.getElementById("button");
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
p.setAttribute('onclick','clik(this);'); // Here I set the new onclick handler
document.body.appendChild(p);
}
function clik(elem)
{
elem.style.color = "green";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="input"></input>
<button type="button" id="button"> add </button>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
</body>
</html>
Also don't set the same id for multiple elements. I removed that code. The rest is the same :)
It is always green because you are calling the clik function and passing the response to onclick. You need to assign the function to onclick. Additionally when you pass a function to onclick, you receive an event as param and you can use event.target to get the element. See code below:
var input = document.getElementById("input")
var button = document.getElementById("button");
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
p.onclick=clik;
document.body.appendChild(p);
p.id="p";}
function clik(event)
{
const el = event.target || event;
el.style.color = "green";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="input"></input>
<button type="button" id="button"> add </button>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
<p class="p" type="button" id="p" onclick="clik(this)"> added in html </p>
</body>
</html>
The idea is that I would like to add a text box in each div, that I have created dynamically.
HTML
<!DOCTYPE html>
<html>
<head>
<title>trial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--bootstrap setup-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="trial.js"></script>
</head>
<div>
<p> Title</p>
</div>
<div>
<button class = "btn_add">Add </button>
</div>
<!-- level container-->
<div id = "container">
</div>
<!--stuff container -->
<div id="random_container">
</div>
</body>
</html>
JS
$(document).ready(function () {
var i = 1;
$(document).on('click', '.btn_add', () => {
let newElement = document.createElement('div');
newElement.setAttribute("id", "level_" + i);
newElement.setAttribute("class", "panel");
$('#container').append(`<div id="title">\
Level ` + i +`
</div> \
<div>\
<button id =btnadd_`+ i +` class="btn_addStuff"> Add Stuff </button>
</div>`);
$('#container').append(newElement);
i = i + 1;
});
$(document).on('click', '.btn_addStuff', () => {
/**let element = document.getElementById(div = "level_"+i);
element.append(`<div id="card"> \
<textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea> \
</div>`);
$('random_container').append(element); */
$('#random_container').append(`<div id="card"> \
<textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea> \
</div>`
);
});
});
My idea is that if I click the button add, I should have a div where there is level 1 and the button add stuff. Which it works.
For example, if I click 3 times, the button add, I should have three div, which each contains a button "add stuff" and the name level. What I would like to do, is if I click the button add stuff, it should appear a text box. The problem that I am having with my code, is that I am not able to have the text box in the right position. If I am in the level one and I click 2 times the button add stuff, I should get two text boxes in the level one, and if I decide to click 3 times on the level 2 to get 3 boxes, I should get 3 text boxes.
Instead, what happens, it's that I am having the text boxes only in one level.
What I thought is to try to get the id in the addstuff button and then try to append the code and then add everything in the random_container, but I can't get an element that has created dynamically?
Hope the question is clear.
If i understood correctly then You should remove the random_container and add the textareas below the inputs
<!DOCTYPE html>
<html>
<head>
<title>trial </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--bootstrap setup-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="trial.js"></script>
</head>
<body>
<div>
<p> Title</p>
</div>
<div>
<button class = "btn_add">Add </button>
</div>
<!-- level container-->
<div id = "container">
</div>
</body>
<script>
function addStaff(btn) {
var parent = $(btn).parent()
console.log(parent)
parent.append(`
<div id="card">
<textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea>
</div>
`)
}
$(document).ready(function () {
var i = 1;
$(document).on('click', '.btn_add', () => {
let newElement = document.createElement('div');
newElement.setAttribute("id", "level_" + i);
newElement.setAttribute("class", "panel");
$('#container').append(`
<div id="title">
Level ${i}
</div>
<div id="add_staff-${i}">
<button id="btnadd_${i}" onclick="addStaff(this)"> Add Stuff </button>
</div>
`);
$('#container').append(newElement);
i = i + 1;
});
});
</script>
</html>
Seeing as you're using jQuery, you're life will be a lot easier using jQuery to create the new elements:
var i = 1;
$(".btn_add").on('click', () => {
// Create Main Div
var mainDiv = $("<div />").prop("id", "level_" + i).addClass("panel");
// Create Title Div
var divTitle = $("<div />").prop("id", "title_" + i).html("Level " + i);
// Create Button to add cards inside this div
var divButton = $("<button />")
.prop("id", "btnAdd" + i)
.html("Add Stuff")
.on('click', () => {
// Get number of cards already in this div so we can generate unique id
var cardCount = $("#level_" + i).find(".card").length;
// create the Card
var card = $("<div />").prop("id", "card_" + cardCount + 1).addClass("card").html("I am a card");
// Put the card in this div
$("#level_" + i).append(card);
}));
// Put it together
mainDiv.append(divTitle).append(divButton);
// Put it in the container
$("#container").append(mainDiv);
// Increment the counter
i++;
});
Note: Your code will try to create elements with the same id in places. Can't do that.
I have created a button in HTML and want it to show and then hide a text block. Is it possible to do it using only one bottom with JavaScript? I mean that by clicking on the button a text block should appear in <p id="text"></p> and when you click again the text block becomes hidden. In my code, the text block only is shown but it cannot be hidden.
my code:
<button type="button" onclick="rulesEnglish()">Rules</button>
<p id="text"></p>
//js:
function rulesEnglish() {
document.getElementById('text').innerHTML = 'text block';
}
If i understood your question you can try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> test</title>
<script type="text/javascript">
function rulesEnglish(){
var pa = document.getElementById("text");
if (pa.style.display === "none") {
pa.style.display = "block";
pa.innerHTML = 'text block';//if you want write a text...
} else {
pa.style.display = "none";
}
}
</script>
</head>
<body>
<button type="button" onclick="rulesEnglish()">Rules</button>
<p id="text">My Text</p>
</body>
</html>
Why I cannot set property innerhtml of null showing?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHtml= "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re(){
a.style.boxShadow = "-4px -4px grey"
},200)
}
</script>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Please help me with this code
Inner HTML not working I can't find where is error so please help me
You have a few issues with your code:
innerHtml isn't a property, you instead need to use innerHTML
You are trying to target elements in your js code before they are loaded on the page (the DOM - Document Object Model, isn't ready yet). To overcome this you can call your code when your page has loaded. You can do this by using window.onload=init, where init is a function, which runs when the page has loaded.
Your targeting the id demo in your javascript but you do not have an element with the id demo in your HTML, you have the id dome so I'm assuming dome is supposed to say demo
Fixing all of these things will fix your issue.
See a working example bellow:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function init() {
var scr1 = 0;
var scr2 = 0;
document.getElementById("demo").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHTML = "Your Score :";
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none";
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey";
}, 200);
}
}
window.onload = init;
</script>
</head>
<body>
<h2 class="scr1" id="demo">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Move your script tag to the bottom of page just below the body close tag .
Also you are referring to an element "dome", but in html you have element "demo", make them both the same
document.getElementById("demo").innerHTML = "Paragraph changed!";
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 class="scr1" id="dome">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid"></div>
<div class="srt" id="none">
<h4>Start</h4>
</div>
</center>
<script>
var scr1 = 0;
var scr2 = 0;
document.getElementById("dome").innerHTML = "Paragraph changed!";
document.getElementById("CS").innerHtml = "Your Score :"
function srt() {
var a = document.getElementById("none");
a.style.boxShadow = "none"
setTimeout(function re() {
a.style.boxShadow = "-4px -4px grey"
}, 200)
}
</script>
</body>
</html>