Im fairly new to javascript and i'm trying to do a simple function where my div can be changed with a click of a link. Everything works fine except for when I click on my first link again, it stops working. The others continue to work...
Here is my code...hope someone can help me! Thanks!
<script>
function changedivVIDEO(){
var div = document.getElementById("fw14video");
div.innerHTML = "<div id='main2'>Hello</div>";
}
function changedivCAMPAIGN(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main3'>Hello</div>";
}
function changedivRUNWAY(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>Hello</div>";
}
</script>
<div id="main">
<div id="fw14video"></div>
<div id="fw14campaign"></div>
<div id="fw14runway"></div>
<div id="fw14runway"></div>
</div>
<p><h3>VIDEO</h3></p>
<p><h3>CAMPAIGN</h3></p>
<p><h3>RUNWAY</h3></p>
<p><h3>ACCESSORIES</h3></p>
</div>
I made an example that fills in the details I think are missing:
<div id="fw14video"></div>
<div id="fw14campaign"></div>
changediv1
changediv2
changediv3
<script>
function changediv1(e){
var div = document.getElementById("fw14video");
div.innerHTML = "<div id='main2'>div1</div>";
e.preventDefault();
}
function changediv2(e){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main3'>div2</div>";
e.preventDefault();
}
function changediv3(e){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>div3</div>";
e.preventDefault();
}
</script>
This works as intended. I am using e.preventDefault() to make it not follow the links, and set text different so you can tell which got clicked. Some questions:
do you mean for the IDs to be different?
how did you bind your functions to the links? (I used onclick.)
I think this:
function changedivRUNWAY(){
var div = document.getElementById("fw14campaign");
div.innerHTML = "<div id='main4'>Hello</div>";
}
Should be:
function changedivRUNWAY(){
var div = document.getElementById("fw14runway");
div.innerHTML = "<div id='main4'>Hello</div>";
}
As a starter...and then if nothing else is missing in the code you posted there's a lose < /div> tag.
Related
I am trying to spawn different div's and remove them after they do their job. A simple version of my code is:
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(child);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"?\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>'
The problem is that when the first spawned div is deleted, all div's are deleted. Any help is appreciated on how to fix this.
How about something like this:
function eraseDiv(target){
var div = target.parentNode;
var container = div.parentNode;
container.removeChild(div);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<button onclick=eraseDiv(this);> Delete</button>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<button type="button" name="submit" onclick="spawnDiv();">Spawn</button>
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
First thing, since you're returning false every time you obviously don't want to use the submit functionality of your submit input, so change it to a button instead.
Second thing, remove the ID from the spawned div since you should never have two divs with the same ID.
Third thing (like the first thing) since you're not using the link functionality of the anchor element, you should change it to a button instead (using CSS you can style this like an anchor if you want to).
Fourth thing, inside the delete button, add this as a parameter to the eraseDiv function. You can now access the button that was clicked using the function parameter rather than trying to find it by an ID.
The simplest fix to your code without modifying the functionality (and view of the page) of what you did is to replace the href="?" with href="#".
In your original code, when you do something like link with the "?" as the hyperlink, this actually performs a GET request which will reload the page. This is tricky because it makes it seem like your delete code is removing all the spawned divs from both cn1 and cn2 divs.
Changing the href=? to href=# prevents a GET request from happening. Below is a snippet that directly makes this change that results in the correct behavior of your original code (by deleting the spawned element in cn1). You will have to further modify your code to make it do what you want.
function eraseDiv(){
var c = document.getElementById("cn1");
c.parentNode.removeChild(c);
}
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child";
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<a href=\"#\" onclick=eraseDiv(); return false; > Delete</a>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
Another way of doing it would be to create a id for div like this
<html>
<body>
<input type="submit" name="Submit" value="Spawn" onclick="spawnDiv(); return false;" />
<div id= "test">
<div id= "cn1"></div>
<div id= "cn2"></div>
</div>
<script>
function eraseDiv(j){
var c = document.getElementById('child'+j);
c.parentNode.removeChild(c);
}
var i=1;
function spawnDiv(){
var x = document.getElementById("test");
var d = document.createElement("div");
d.id = "child"+i;
d.style.width = "500px";
d.style.height = "30px";
var content = "Some text for testing!" + "<u ><a onclick=eraseDiv("+i+++"); > Delete</a></u>";
d.innerHTML = content;
if (document.getElementById("cn1").innerHTML.trim() == "")
document.getElementById("cn1").appendChild(d);
else
document.getElementById("cn2").appendChild(d);
}
</script>
</body>
</html>
i have created text filed row in create function . i added delete button in create() function that calls delete when click on button. any help?
<body>
<input type="button" value="createDiv" onclick="create()"/>
</body>
<script type="text/javascript" defer="defer">
function create()
{
var newDiv = document.createElement('div');
newDiv.innerHTML = "<table id='e' border><tr><td><input type='text'><button onclick=del(this.value)</button></td></tr></table>";
// newDiv.className = 'newClass';
document.body.appendChild(newDiv);
}
function del (e) {
if ('function' === typeof e.remove) {
return e.remove();
}
return e.parentNode.removeChild(e);
}
Change:
<button onclick=del(this.value)
to:
<button onclick='del(this)'>
DEMO
Two problems:
You were missing the closing >.
The del function expects to receive the element to delete. The value of the element is not appropriate, especially since the button doesn't have a value.
I'm not sure this will do what you really want. This will just remove the button, it won't remove the table row. If you want to remove the whole table, you need to go up several levels of parentNode until you reach the <table> element.
Also, you should always enclose attribute values in quotes. In this case it works without them, because there are no spaces in the value, but you should get in the habit.
If you want to delete the row then the code should be something like this...
<script type="text/javascript" defer="defer">
function create()
{
var newDiv = document.createElement('div');
var rowId = "someId";
var output = "<table id='e' border><tr id='"+rowId+"'><td ><input type='text'><button onclick=del('"+ rowId +"')>delete</button></td></tr></table>";
newDiv.innerHTML = output;
newDiv.className = 'newClass';
document.body.appendChild(newDiv);
}
function del (id) {
var div = document.getElementById(id);
div.parentNode.removeChild(div);
}
</script>
If so you have done lot of mistake as Barmar Said.
I guess you are missing the quotes and the Button Tag Close tag '>'
<button onclick='del(this.value)'></button>
The HTML code for your button is incorrect. You don't have a closing bracket for the tag, and as there are no delimiters around the onclick attribute value, the closing tag will be part of the value, causing a syntax error in the script.
Try like this:
newDiv.innerHTML = '<table id="e" border><tr><td><input type="text"><button onclick="del(this.value)"></button></td></tr></table>';
i have to add multiple thumbnail images(501.jpg,502.jpg etc. added in the gengrid function) in a page each of which opens another image(port.jpg) on click and on clicking another thumbnail image the port.jpg has to be removed. The problem is that the removeChild is not working in this case. Can anyone please help...
here is the code
<script type="text/javascript">
var lastper=null;
function gengrid()
{
var i=0;
var num_stud=8;
var newdiv;
var divIdName;
var maindiv;
for(i=1;i<=num_stud;i++)
{
newdiv = document.createElement('div');
divIdName = '50'+i;
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('onclick','addit('+i+')');
newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
maindiv=document.getElementById('main');
maindiv.appendChild(newdiv);
}
}
gengrid();
function addit(picno)
{
var person = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
lastper = document.getElementById('50'+picno);
}
</script>
The main issue is that you're passing a string to the removeChild call. Using
lastper.removeChild(document.getElementById('portfolio'));
instead will fix that problem.
The alert you have is a secondary issue. It'll fail the first time through because "lastper" is null and so doesn't have an id property.
if(lastper){
lastper.removeChild('portfolio');return;}
I don't believe this is a valid ID for an element. An ID must begin with a letter.
lastper = document.getElementById('50'+picno);
What are valid values for the id attribute in HTML?
Try this
function addit(picno)
{
var person = document.getElementById('50'+picno);
lastper = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
}
I have this code:
<div class="col3">
<a id = "training-launch-button" href="javascript:void(0);" title=" My title here" class="button" onClick="Test();">Launch</a>
</div>
function Test() {
var new_window= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
new_window.document.createElement("div");
document.getElementsByTagName('div')[0].innerHTML = '<ol><li>html data</li></ol>';
}
something is not right, I dont see the ordered list item?
I eventually want to build some HTML in the new window.
Use this Js
function Test() {
var newWindow= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var newContent = "<HTML><HEAD><TITLE>One Sub Window</TITLE></HEAD>";
newContent += "<BODY><div><ol><li>html data</li></ol></div>";
newContent += "</BODY></HTML>";
newWindow.document.write(newContent);
newWindow.document.close();
}
I think this is your problem; getElementsByName returns an array, not one element, so;
new_window.document.getElementsByTagName('div')[0].innerHTML = '<ol><li>html data</li></ol>';
NB: I have a '[0]' in there
I would try
new_window.document.getElementsByTagName('div')[0].innerHTML = ...
This should do it:
var new_window= window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var div = new_window.document.createElement('div');
new_window.document.body.appendChild(div);
div.innerHTML = '<ol><li>html data</li></ol>';
You are actually not appending the new div to the new document's body, you'll have to use .appendChild() method for that, see this :
function Test() {
var new_window = window.open('','Ratting','width=550,height=170,0,status=0,resizable=1');
var div = new_window.document.createElement("div");
new_window.document.getElementsByTagName('body')[0].appendChild(div);
div.innerHTML = '<ol><li>html data</li></ol>';
}
see here - working example
In the below code "objTo" is a div to which i need to insert multiple number of div.
when i use the code for the first time its working.but on the next time its overwriting the existing code.
<script>
var divtest= document.createElement("div");
divtest.innerHTML = "<div>new div</div>"
objTo.appendChild(divtest)
</script>
Where am i going wrong?
I have made a very simple working version for you :
http://jsfiddle.net/hQKy9/
Multiple clicks works the whole time :
Script
function addDiv() {
var objTo = document.getElementById('container');
var divtest = document.createElement("div");
divtest.innerHTML = "new div";
objTo.appendChild(divtest);
}
Html
<div id="container"></div>
<input type="button" onclick="addDiv();" value="Click here to add div"/>
Even through Marc gave the ans before
I found it we can do more like adding ID/Class and CSS like the following way I did
const newChild = document.createElement('div');
newChild.id = 'newly_content';
newChild.innerHTML = `
<p style="font-size: 30px;padding: 200px 0px 10px 0px;">
A new content has been created!
</p>
`;
document.getElementById('ItemID').appendChild(newChild);