removeChild with addEventListener - javascript

I'm just learning javascript. Testing stuff on the google Chrome Console I ended up with this:
<html>
<head></head>
<body>
<div id="divi">
<button id="butti">Click Me</button>
</div>
</body>
</html>
And Js:
function cBoton (){
var getDiv = document.getElementById("divi");
getDiv.removeChild(getDiv.lastChild);
};
var getButton = document.getElementById("butti");
getButton.addEventListener("click", cBoton);
I expect the button to be deleted after one click. ¿Why works only after the second click?
tx!

The .lastChild of the element in your markup is "" (try console.log(getDiv.lastChild) to clarify).
Use this to be sure that you are deleting the desired element:
function cBoton() {
var getDiv = document.getElementById("divi");
getDiv.removeChild(getButton);
};

On the first click, the last child of divi is the text node containing the whitespace after the button, and this gets removed. On the second click, the button is the last child.

Invaluable..
Modified the source;
/* .css */
div :nth-child(even){background-color: #f2f2f2}
/*.js */
function addDiv() {
var para = document.createElement("p");
var node = document.createTextNode('textHere'); // add cell code here
para.appendChild(node);
var element;
element = document.getElementById("div1"); // to add div id recursion
element.appendChild(para);
}
function cBoton (){
var getDiv = document.getElementById("div1");
getDiv.removeChild(getDiv.lastChild);
}
var getButton = document.getElementById("div1");
getButton.addEventListener("click", cBoton);
/* HTML */
<html>
<head></head>
<body>
<button onclick="addDiv()">add</button>
<button onclick="cBoton()">Click Me</button>
<frameset><legend>recursions</legend>
<div id="div1"></div>
</frameset>
</body>
</html>

Related

Not possible to remove paragraph dynamicaly

<html>
<body>
<div id="div1">
<button id="btn1">click me to show line </button>
<button id="btn2">click me to hide line </button>
</div>
<script>
var lines = ["line1", "line2", "line3"];
var button1 = document.getElementById("btn1");
button1.addEventListener("click", myfunction1);
function myfunction1 () {
var show = document.getElementById("div1");
var crt = document.createElement("p");
crt.innerText = lines[0];
show.appendChild(crt);
}
var button2 = document.getElementById("btn2");
button2.addEventListener("click", myfunction2);
function myfunction2 () {
var hide = document.querySelector("p");
hide.remove();
}
</script>
</body>
</html>
With the above code I would like when I click the first button to display text from the array and when I click the second button to delete it. My problem is that it is not deleted by clicking the second button.
The id of your second button is the same as the first. It must be btn2.

Repeal first function with second function

I have a function translation() which translates some parts of the contents.
I would like the reverse those translations when stopTranslation() is activated. I want to do it without simply reloading the page. I tried using return but the way I put it didn't work.
So, when you click on the first button, it activates function translation() and the text of <p> changes.
When the second button is clicked I want text that was changed by the first button to be changed back to normal. It should undo the first function.
<!DOCTYPE html>
<html>
<body>
<button onclick="translation()">ENG</button>
<button onclick="stopTranslation()">SRB</button>
<p id="a">Some text</p>
<script>
function translation() {
document.getElementById("a").innerHTML = "Hello World";
}
function stopTranslation() {}
</script>
</body>
</html>
You'll have to remember the text you're overwriting by reading innerHTML, then later put that text back by writing it back to innerHTML.
For instance, you might remember the old content as a data-* attribute on the element:
function translation() {
var element = document.getElementById("a");
element.setAttribute("data-text", a.innerHTML);
a.innerHTML = "Hello World";
}
function stopTranslation() {
var element = document.getElementById("a");
var text = element.getAttribute("data-text");
if (text) {
a.innerHTML = element.getAttribute("data-text");
element.removeAttribute("data-text");
}
}
Live Example:
function translation() {
var element = document.getElementById("a");
element.setAttribute("data-text", a.innerHTML);
a.innerHTML = "Hello World";
}
function stopTranslation() {
var element = document.getElementById("a");
var text = element.getAttribute("data-text");
if (text) {
a.innerHTML = element.getAttribute("data-text");
element.removeAttribute("data-text");
}
}
<button onclick="translation()">ENG</button>
<button onclick="stopTranslation()">SRB</button>
<p id="a">Some text</p>
Side note: I strongly recommend not using onxyz-attribute-style event handlers. Use modern event handling instead (addEventListener and such).

div - createElement is not working?

I'm trying to create the div tag using javascript.? But why it is not working?
I have seen the document.createElement not working
Javascript createElement() not working in Chrome
But these answers are not suited for my script.
<html>
<head>
<script>
var div = '<div id = con style="width:auto; height:200px; Background:#2a2a2a">';
var x = document.createElement(div);
var y = document.getElementById('con');
y.innerHTML = "hello world";
document.body.appendChild(x);
</script>
</head>
<body>
</body>
</html>
How can I do it?
It doesn't work like so. .createElement() only excepts the type of element you want to create, no predefined HTML snippet. So you have to create a Div Element using document.createElement('div'); and work on that element afterwards. Like
For Instance
var div = document.createElement('div');
div.id = 'con';
div.style.cssText = "width:auto; height:200px; Background:#2a2a2a";
document.body.appendChild( div );
If you don't need a reference to an Element and you only want to insert new HTML code, you can also use Element.prototype.insertAdjacentHTML() like so
document.body.insertAdjacentHTML( 'beforeend', '<div id="con" style="width:auto; height:200px; Background:#2a2a2a">');
A further problem of your code here is that you try to access the DOM too early. Even if the code would work in its current form, you cannot access document.body in your <head> section because it wasn't fully initialized at that point. Either move the entire <script> source into the <body> section or attach a listener to DOMContentLoaded Event.
If you want to insert entire HTML structure all at once, you can use very useful, cross-browser and unfairly little known insertAdjacentHTML method:
var div = '<div id="con" style="width:auto; height:200px; Background:#2a2a2a"></div>';
document.body.insertAdjacentHTML('beforeend', div);
var y = document.getElementById('con');
y.innerHTML = "hello world";
You cannot create a predefined html like that, also since you are appending to body, the script should be inside the body element not in head
<html>
<head>
</head>
<body>
<script>
var x = document.createElement('div');
x.id = 'con';
x.style.width = 'auto';
x.style.height = '200px';
x.style.background = '#2a2a2a';
x.innerHTML = "hello world";
document.body.appendChild(x);
//no need to access `y` by id, use the reference returned by createElement to set the content
//var y = document.getElementById('con');
//y.innerHTML = "hello world";
</script>
</body>
</html>

Dynamic div containing selected text inside another div

I have a div element. I will copy-paste some text in this div. Then, upon clicking a create button, another div will be created inside the div with the selected text inside it. The new div will have a different background-color, different fonts, and other style properties. But my code isn't working. Please help me to figure out the mistakes. Thanks!!
<html>
<head>
<title>select</title>
<style>
</style>
</head>
<body>
<script>
function changeit(){
var slctn = document.getSelection();
var strings = slctn.toString();
alert(strings);
var get_id = document.getElementById("myspace");
var elem = document.createChild("div");
var design = document.createAttribute("style");
design.value = "background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;";
elem.setAttributeNode(design);
elem.createTextNode(now);
get_id.appendChild(elem);
alert("it is done");
}
</script>
<div contenteditable="true" width="400px" height="500px" style="background-color:pink;display:block;" id="myspace">ddd</div>
<input type="button" value="select" onClick="changeit();">
</body>
</html>
For create div element you should use
var elem = document.createElement("div");
instead of
var elem = document.createChild("div");
And createTextNode is performed over document something like
document.createTextNode('now');
Working DEMO
<script>
function changeit(){
var slctn=document.getSelection();
var strings=slctn.toString();
alert(strings);
document.getElementById("myspace").appendChild('<div style="background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;">'+document.getElementById("myspace").innerHTML+'</div>');
}
</script>
Works?

issues inserting a div from Javascript

I'm trying to add a div with some text before another div in the document.
Here's my script in a nutshell, assume init() gets called when onload page:
<head>
<script type="text/javascript">
function init () {
var div = document.createElement('div').className = 'title';
div.innerHTML = 'Hello';
var reference = document.getElementById('content');
document.body.insertBefore(div, reference );
}
</script>
</head>
<body>
<div id="content">blah blah</div>
<br /><br />
</body>
I get a type mismatch error on document.body.insertBefore(div, reference), Can someone please let me know what i'm doing wrong?
Try
function init () {
var div = document.createElement('div');
div.className = 'title';
div.innerHTML = 'Hello';
var reference = document.getElementById('content');
document.body.insertBefore(div, reference );
}
You were setting the div to the string title I think (never checked)
Yep here you go
http://jsfiddle.net/FxFzc/

Categories