I learned AngularJS before I learned how to connect vanilla JS to HTML. When I run this code in my browser, the console.logs work, but the number 3 isn't showing up in my first die.
Can you help me fix my code?
JavaScript:
var roll = document.getElementById('roll');
function Dice() {
Document.write('1');
}
function printNumber() {
var one = document.getElementById("one");
one.innterHTML = "3";
console.log('printNumber called!');
}
roll.onclick = function() {
printNumber();
console.log('rolled!');
};
HTML:
<div class="row">
<div class="dice" id="one">
</div>
<div class="dice" id="two">
2
</div>
</div>
<div class="row">
<div class="button" id="roll">Roll the dice!</div>
</div>
<script type="text/javascript" src="dice.js"></script>
innter should be inner and Document should be document.
function Dice() {
document.write('1');
}
function printNumber() {
var one = document.getElementById("one");
one.innerHTML = "3";
console.log('printNumber called!');
}
roll.onclick = function() {
printNumber();
console.log('rolled!');
};
Related
I'm learning JavaScript and this is a practice scenario for me.
What I have already is a button that clones content, and within that content that has been cloned, there is a button to remove it.
When I click the button that prompts you to remove the content, it removes the first set of content.
What I want to happen is when you click the button that prompts you to remove the content, it removes the content related to that button and nothing else.
This is the CodePen link.
https://codepen.io/JosephChunta/pen/YzwwgvQ
Here is the code.
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent() {
var x = document.getElementById("content").parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});
.contentThatShouldBeHidden {
display: none;
}
<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent()">Remove this</button>
<hr />
</div>
</div>
</div>
When you'r trying to remove by ID, it takes the first ID it finds.
To remove the correct content, send this onclick.
<button onclick="removeContent(this)">Remove this</button>
And handle it in your function:
function removeContent(el) {
el.parentNode.remove();
}
Example:
function addContent() {
var itm = document.getElementById("newContent");
var cln = itm.cloneNode(true);
document.getElementById("placeToStoreContent").appendChild(cln);
}
function removeContent(el) {
el.parentNode.remove();
}
// This is for debug purposes to see which content is which
document.getElementById('orderContent')
.addEventListener('click', function(e) {
const orderedNumber = document.querySelectorAll('.thisIsContent');
let i = 1;
for (p of orderedNumber) {
p.innerText = '' + (i++);
}
});
.contentThatShouldBeHidden { display: none; }
<div id="placeToStoreContent">
</div>
<button id="orderContent" onclick="addContent()">Add Content</button>
<div class="contentThatShouldBeHidden">
<div id="newContent">
<div id="content">
<p class="thisIsContent">This is a prompt</p>
<button onclick="removeContent(this)">Remove this</button>
<hr />
</div>
</div>
</div>
In your remove button, do this:
<!-- The "this" keyword is a reference to the button element itself -->
<button onclick="removeContent(this)">Remove this</button>
And in your javascript:
function removeContent(element) {
element.parentNode.remove();
}
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
I have a problem. I have two .html files.
<!DOCTYPE html>
<html><head>...</head>
<body>
<ul><li id="home"><a>Home</a></li></ul>
<div class="content"></div>
<script type="text/javascript" src="Javascripts/navigation.js"></script>
</body>
</html>
and
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded">
</div>
<div id="textPanel" style="background:blue;"></div>
In my navigation.js I load the second .html file into the "content"-div of the first .html:
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
$('#textPanel').height( $('#imgPanel').height() );
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
The loading works! My question is now:
How can I get the id of the div's of the second .html I loaded into the first one?
The var = $("#textPanel"); is null.
Since the content gets loaded asynchronously, you might want to change your code like this, to execute $('#textPanel').height() when it is available:
function home(){
content.load("home.html", function(){
$('#textPanel').height( $('#imgPanel').height() );
});
}
From this specification of callbacks
EDIT
Alternative:
HTML of loaded content
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()">
</div>
<div id="textPanel" style="background:blue;"></div>
JavaScript
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
function setHeight(){
$('#textPanel').height($('#imgPanel').height());
}
Im attempting to get the ID of the specific box that i call.
<div id="box1" onmouseover="transition(box1)" onmouseout="detransition(box1)">
<div class="box1-smallbox">
</div>
function transition(prop){
document.getElementsByTagName(prop + "-smallbox").style.marginLeft = X;
}
I want to get that prop = box1. For a easy system that then can be used with 10 or 20 boxes.
Thanks in advance!
without jquery, only javascript:
<div id="box1" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
<div class="box1-smallbox">aaa</div>
</div>
<div id="box2" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
<div class="box2-smallbox">bbb</div>
</div>
<div id="box3" onmouseover="transition(this.id)" onmouseout="detransition(this.id)">
<div class="box3-smallbox">ccc</div>
</div>
<script type="text/javascript" language="javascript">
function transition(prop){
var els = document.getElementsByTagName("div");
for(var i=0;i<els.length;i++){
if(els[i].className==prop+"-smallbox"){
els[i].style.marginLeft = 200;
}
}
}
function detransition(prop){
var els = document.getElementsByTagName("div");
for(var i=0;i<els.length;i++){
if(els[i].className==prop+"-smallbox"){
els[i].style.marginLeft = 0;
}
}
}
</script>
Turn it into a string since you want to pass it's id as string
onmouseover="transition('box1')"
I am working on a tic tac toe game, which is almost complete. The only thing I am left wondering about is if it is possible to add an event handler for onclick from my .js file instead of directly calling it from an HTML attribute. Here is the bit of HTML that uses the onclick:
<div id="left">
<div id="board">
<div id="one" onclick="playerMove(this)">
</div>
<div id="two" onclick="playerMove(this)">
</div>
<div id="three" onclick="playerMove(this)">
</div>
<div id="four" onclick="playerMove(this)">
</div>
<div id="five" onclick="playerMove(this)">
</div>
<div id="six" onclick="playerMove(this)">
</div>
<div id="seven" onclick="playerMove(this)">
</div>
<div id="eight" onclick="playerMove(this)">
</div>
<div id="nine" onclick="playerMove(this)">
</div>
</div>
</div>
Any thoughts on the matter would be greatly appreciated.
If you use jQuery something like this should work:
$(document).ready(function() {
$('#board div').click(playerMove);
});
In plain javascript (no cross platform libraries), event handlers can be added via javascript code with addEventListener (modern browsers) or attachEvent (older versions of IE).
Here's a simple function that adds an event handler in a cross browser fashion:
// add event cross browser
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
Example usage (called after the page DOM has loaded):
addEvent(document.getElementById("one"), 'click', playerMove);
Or, to install event handlers for all the board divs, you could do this:
var divs = document.getElementById("board").children;
for (var i = 0, len = divs.length; i < len; i++) {
// element nodes only
if (divs[i].nodeType === 1) {
addEvent(divs[i], 'click', playerMove);
}
}
You should really consider using jQuery for this. If you were using jQuery, this would have been as simple as:
$('#board > div').click(playerMove);
In case you want to stick with vanilla JS, you can do:
var items = document.getElementById('board').children;
for(x in items) {
items[x].onclick = function() {
playerMove(items[x]);
};
}
Use this:
document.getElementById('element_id').onclick = function(){ playerMove(this); };
For each Div, change 'element_id' with 'one', 'two', ...
Try:
document.getElementById('one').onclick();
For binding the event handler in js file:
var board = document.getElementById('board'),
divs = board.getElementsByTagName('div'),
i, len = divs.length;
for (i = 0; i < len; i++) {
divs[i].onclick = function() {
playerMove(this);
};
}
Your answer is in following 5 lines. Try it :) If someone copies/converts my code in new post or my post to j-query, That is welcome with no problem.
var yourDivID = document.getElementById('your_Div_ID');
yourDivID.addEventListener('click', function (){ playerMove(this); }, false);
function playerMove(divElement)
{
alert(divElement.id);
}
I have tried to put complete demo Here on jsfiddle.net, You can click any div out of nine to check its event if link does not work, then you can check the following code (working for me WIN7 and FireFox)
<html>
<head>
<title> Add Events Dynamically </title>
<script type="text/javascript">
function add_DivClick_Events() {
var nodes = document.getElementById('board').childNodes;
for (var i = 0; i < nodes.length; i++) {
if (i % 2 == 1) {
nodes[i].addEventListener('click', function () {
playerMove(this);
}, false);
}
}
}
function playerMove(divElement)
{
alert(divElement.id);
}
</script>
<style type="text/css">
#board div
{
width:20px;
height:20px;
border:2px solid;
}
</style>
</head>
<body onload='add_DivClick_Events()'>
<div id="left">
<div id="board">
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
</div>
<div id="six">
</div>
<div id="seven">
</div>
<div id="eight">
</div>
<div id="nine">
</div>
</div>
</div>
</body>
</html>