Not possible to remove paragraph dynamicaly - javascript

<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.

Related

Display button value in div onclick. Javascript/HTML

I have a set of buttons with different values. When I press a button I want the value of the button to be displayed in the div picked_letters, but nothing is showing. The code is divided in an html file and a javascript file.
html file looks like this:
<body>
<script src="cases.js"></script>
<div id="written_word">
</div>
<div id="list_of_letters">
</div>
<div id="picked_letters">
</div>
</body>
and the onclick in the javascript file looks like this:
for(let i = 0; i < 26; i++) {
let btn = document.createElement("button");
btn.style.background = 'silver';
btn.style.width = '15%';
btn.style.fontWeight = 'bold';
btn.style.fontSize = '135%';
btn.style.display = 'inline-block';
btn.value = case_values[i];
btn.onmouseover = function (){
btn.style.background = 'goldenrod';
}
btn.onmouseleave = function() {
btn.style.background = 'silver';
}
btn.onclick = function() {
btn.style.background = 'darkgrey';
btn.disabled = true;
btn.innerHTML = String(btn.value);
document.getElementById("picked_letters").innerHTML =
String(btn.value);
}
btn.innerHTML = String(i+1);
document.body.appendChild(btn);
}
The button changes color, becomes disabled and displays the value inside the button but it's the last line with getting the button value into a div that I am having problems with. Have looked around but haven't found a solution that solves this problem.
##Edit: The problem seems to have been fixed when I put the script import at the end of the body (and some other minor changes).
Where are you setting the value of the button?
Can you share the button code?
Does your button look like this?
<button>My Button</button>
or do you set your value like this?
<button value="my button value">My button</button>
If you have a value set - you can do this:
btn.onclick = function () {
console.log(btn.innerHTML);
btn.style.background = "darkgrey";
btn.disabled = true;
document.getElementById("picked_letters").innerHTML = btn.value;
};
If you don't have a value set - using btn.value won't return anything.
I would try adding a value to your button if you dont have one. Or if you want to call the innerhtml of the button:
<button>My button</button>
and then
btn.onclick = function () {
console.log(btn.innerHTML);
btn.style.background = "darkgrey";
btn.disabled = true;
document.getElementById("picked_letters").innerHTML = btn.innerHTML;
};
The code above is perfectly fine, the is definately being displayed in the "picked_letters" div, but the value of btn is ""(empty) so the value set to the div is also empty. To solve this issue, add value to the button by doing:-
. and the issue will be gone.
const btn = document.querySelector('#btn')
btn.onclick = function() {
btn.style.background = 'darkgrey';
btn.disabled = true;
console.log(btn.value)
btn.innerHTML = String(btn.value);
document.getElementById("picked_letters").innerHTML =
String(btn.value);
}
<body>
<div id="written_word">
</div>
<div id="list_of_letters">
</div>
<div id="picked_letters">
</div>
<button id='btn' value='5'>Tap me</button>
</body>

On each click new button has been created. How should I create same functionality for new created buttons

var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
var btn = document.createElement("BUTTON");
var t = document.createTextNode(clicks);
btn.setAttribute("onClick", clicks);
btn.appendChild(t);
document.body.appendChild(btn);
}
<button type="button" onClick="clickME(**strong text**)">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
This is the code that created new button with the counter. Now I want to implement same functionality for each of the new buttons. Please guide me.
The problem is in this line
btn.setAttribute("onClick", clicks);
clicks is a variable which counts the clicks, not a function. You want to instead assign the function to the new button, like this:
btn.onclick = clickME;
Here's the code: https://codesandbox.io/s/still-frog-0qust

how can i generate a textbox with a button to close both of it dynamically using js DOM?

<html>
<head>
<title></title>
<script>
function show() {
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = "textBox";
var btn = document.createElement("button");
btn.innerHTML = "X";
btn.id = "button";
btn.onclick = close;
document.getElementById("display").appendChild(textbox);
document.getElementById("display").appendChild(btn);
}
function close() {
document.getElementById("textBox").style.display = "none";
document.getElementById("button").style.display = "none";
}
</script>
</head>
<body>
add contact
<div id="display">
</div>
</body>
</html>
In this code I was manged to generate the textbox with a button.
when we click on the button in the first generating textbox button pair it is working.
but it is not working or multiple pairs.
I need to close each pair by clicking the button in the each pair.
The attribute id must be unique in a document, use class instead to refer multiple elements with same attribute. You can use this object to refer the currently clicked button so that you can remove the correct element.
Try the following way:
function show(){
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id = "textBox";
var btn =document.createElement("button");
btn.innerHTML ="X";
btn.class="button";
btn.onclick = close;
document.getElementById("display").appendChild(textbox);
document.getElementById("display").appendChild(btn);
}
function close(){
this.previousElementSibling.remove();
this.remove();
}
add contact
<div id = "display"></div>
Please Note: previousElementSibling is not supported until IE9.
In that case please refer: parentNode or previousElementSibling not working in IE8

removeChild with addEventListener

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>

Javascript - change value of variable on button click

I have an 10 HTML buttons that I need to change the value of a javascript variable when clicked.
song2 = "mp3Player/kingRight.mp3";
function returnVar2(song2) { return this[song2]; }
Song2 needs a new URL depending on which button is clicked.
Having a hard time figuring this out.
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
alert(x);
}
b1.onclick = function() {
x = "button one";
showX();
};
b2.onclick = function() {
x = "button two";
showX();
};
</script>
Demo
HTML:
<div id="mp3buttons">
<div title="mp3Player/kingRight.mp3">King Right</div>
<div title="mp3Player/AnotherSong.mp3">Another Song</div>
etc.
</div>
JavaScript:
var mp3buttons = document.getElementById( 'mp3buttons' );
mp3buttons.onclick = function ( e ) {
var url = e.target.title;
// do stuff with this URL
};
So, you put your buttons inside a wrapper. For each button, you place the URL inside the title attribute (or some other appropriate attribute).
In JavaScript code, you bind a click handler to the wrapper. The clicked button is referenced with e.target.

Categories