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>
Related
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>
I'm totally lost as to where to begin here, how would I create a countdown button so that each time my button is clicked, it prints out the global variable and reduce it by 1 in the innerHTML and when it hits 0 it says BOOM?
I know I have to declare the variable outside but not sure what to do afterwards
JS:
var i = 20
function myFunction()
{
i = i--; // the value of i starting at 20
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
I tryed this code and works fine
var i = 20;
function myFunction() {
myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
myData.textContent = "BOOM!"
}
}
html code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="task6.js" type="text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset="utf-8">
<title> Task 6 </title>
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var i = 20;
function myFunction() {
var myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if(i <= 0) {
myData.textContent = "BOOM!"
}
}
</script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id="box">
<p id="mydata"> Count Down </p>
<p> <button onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>
It's good practice to not inline JS in the HTML so I'll provide an extra example to show how to separate it out using a couple of DOM selection methods:
let count = 20;
// grab the element with the mydata id
const mydata = document.getElementById('mydata');
// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
if (count === 0) {
mydata.textContent = 'Boom';
} else {
mydata.textContent = count;
}
count--;
}
<body>
<p id="mydata">Countdown</p>
<button>Click</button>
<script src="task6.js" type="text/javascript"></script>
</body>
Reference
getElementById
querySelector
addEventListener
I'll assume you want to show the variable output and the BOOM at the <p id="mydata"> Count Down </p>, if I am mistaken correct me. So, something like this:
let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
i = i - 1;
myData.textContent = i;
if(i === 0) {
myData.textContent = "BOOM!"
}
}
You almost got it whole,only missed the textContent and if part. If this is what you wanted to achieve. If this isn't what you were looking for, hit me up so I can correct it. Cheers :)
You need some way of displaying the number inside of your variable. One of the simplist ways to do this would be to set text to your paragraph tag using getElementById() and inner HTML. For example, after running your deincrement, on the next line you would do something like...
function myFunction()
{
i = i--; // the value of i starting at 20
document.getElementById("mydata").innerHTML = i;
}
This code simply grabs your "mydata" paragraph from the DOM and injects the number into the tag as html.
So i went as far as creating an entirely new HTML document to change my H1 class to a different color. Can someone please tell me why its not working? I dont understat because I literally copied exactly how to change the color and I've done it before but its not working now.
<!DOCTYPE html>
<html>
<head>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</head>
<body>
<h1 id="box">NBA Legends</h1>
</body>
</html>
If you move the <script> tag after the <h1> tag it will work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box">NBA Legends</h1>
<script>
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</body>
</html>
It is a best practice to put the <script> tag at the end of the document. This way the HTML renders and then the JS executes.
here its working. JS is executing before html can be render.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="box1">NBA Legends</h1>
</body>
<script>
var box = document.getElementById("box1");
boxStyle = box.style;
boxStyle.color = 'red';
</script>
</html>
So this is what i did when i used the put the JavaScript on a separate page:
(And i made sure the source page name is yellow.js)
<!DOCTYPE html>
<html>
<head>
<script src="yellow.js"></script>
</head>
<body>
<h1 id="box" onload="change()">NBA Legends</h1>
</body>
</html>
function change() {
var box = document.getElementById("box");
boxStyle = box.style;
boxStyle.color = 'red';
}
I am working on something, and I don't have any codes for now, because I have no idea how to do this! Please help me out here :D
What I think would be nice is if I could make a password that changes my style:
<html>
<head>
<style>
.passwordProtected {
display:none; <- this is supposed to change to "block" when the password is written in, and they click "Show div"
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password"> <--- This is where they type the password
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
</body>
</html>
What do I do?
If I'm understanding you right, the code would look something like this:
<html>
<head>
<style>
.passwordProtected {
display:none;
}
</style>
</head>
<body>
<div id="loginArea">
<input type="password">
<button onclick='showDiv();'>Show div</button>
</div>
<div id="passwordprotected" class="passwordProtected">
<h1>This is the protected div they enter</h1>
</div>
<script type="text/javascript">
function showDiv(){
var myDiv = document.querySelector('.passwordProtected');
myDiv.style.display = 'block';
}
</script>
</body>
</html>
You can find out more about styling with JavaScript here: http://www.w3schools.com/jsref/dom_obj_style.asp.
I'm building a webpag in html. The image must change when I mouse over a div, but it does nothing. Anyone any idea?
<!doctype html>
<html>
<head>
<meta charset ="UTF-8"/>
<title>Oef 19.5</title>
<link href="19_5.css" rel="stylesheet"/>
<script>
function kleuren(veld)
{
var tshirt = document.getElementsByClassName("shirt");
tshirt.src=veld.id+".jpg";
}
</script>
</head>
<body>
<h1>Pick a color</h1>
<p><img class="shirt" src="gray.jpg"></p>
<div id="pink" class="roze" onmouseover="kleuren(this)"></div>
<div id="blue" class="blauw" onmouseover="kleuren(this)"></div>
<div id="brown" class="bruin" onmouseover="kleuren(this)"></div>
</body>
</html>
var tshirt = document.getElementsByClassName("shirt"); returns a collection of elements so access it like
tshirt[0].src=veld.id+".jpg"; //Since you have only one element with that class. If you have more, iterate over them