Display button value in div onclick. Javascript/HTML - javascript

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>

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.

How to reset a button after a few seconds?

I have been trying to create a button that shows the text "copy to clipboard" initially, after clicking the text is copied to the clipboard and the button changes the innerHTMl text to "Copied!" and the button background changes to green.
now, the button should reset to the text "copy to clipboard" and color also.
function copyText() {
navigator.clipboard.writeText("//text to be copied//");
var elem = document.getElementById("button").style.backgroundColor = 'green';
var elem = document.getElementById("button").innerHTML = "Copied!";
}
<div class="adress-right">
<button class="button" onclick="copyText()" id="button"><img src="images/clipboard.svg"> Copy to Clipboard</button>
</div>
You can create a delay async function with setTimeout, add a class instead of set the properties in js side and clean your unnecessary code like this:
const btn = document.getElementById('button');
const delay = (s) =>
new Promise((resolve) => setTimeout(resolve, s * 1000));
btn.addEventListener('click', async() => {
navigator.clipboard.writeText('//text to be copied//');
btn.className = 'copied';
btn.innerText = 'Copied';
await delay(2);
btn.classList.remove('copied');
btn.innerText = 'Copy to Clipboard';
});
.copied {
background-color: green;
color: white;
}
<div class="adress-right">
<button class="button" id="button">Copy to Clipboard</button>
</div>
you can add a timeout inside your function on the bottom like this:
setTimeout(function() {
document.getElementById("button").style.backgroundColor = 'white';
document.getElementById("button").innerHTML = "Copy to Clipboard!";
}, 3000);
In react or other frameworks/libraries will be easier, but for a while you can use an If statement.
function copyText()
{
navigator.clipboard.writeText
("//text to be copied//");
if(document.getElementById("button").text != 'Copied'){
var elem = document.getElementById("button").style.backgroundColor='green';
var elem = document.getElementById("button").innerHTML = "Copied!";
}
}
There is a few things to do.
set a timer
reset background-color
insert again the img and the text aside
You can do it this way:
function copyText() {
navigator.clipboard.writeText("//text to be copied//");
var elem = (document.getElementById("button").style.backgroundColor = "green");
var elem = (document.getElementById("button").innerHTML = "Copied!");
// give it a delay before the content of button is updated
setTimeout(() => {//timer
var button = document.getElementById("button");// fetch the button
button.textContent = "";//erase the text
button.style.backgroundColor = "revert";//reset background-color
button.insertAdjacentHTML(// insert you img and text
"beforeend",
'<img src="images/clipboard.svg"> Copy to Clipboard'
);
}, "1000");//duration in ms secondes before the function is fired 1000 is equal to 1second
}
<div class="adress-right">
<button class="button" onclick="copyText()" id="button"><img src="images/clipboard.svg"> Copy to Clipboard</button>
</div>
ressources
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Vanilla Javascript : how to make a button clickable once only

I have a quiz app application that I am working on that dynamically creates 2-4 buttons for the answer. However, if you click on an answer, you can keep clicking on the same answer or keep clicking the other answers. I want the user to be able to click one of the buttons but then not be able to keep clicking. caveat though: when a user clicks one of the buttons, a new "Next" button gets created and that one does still need it's click event.
tl;dr
I need dynamically created buttons to be clickable only once but a "Next" button to still be clickable.
Code:
function renderButtons() {
var answerContainer = document.getElementById("answer-buttons");
answerContainer.innerHTML = "";
for (var i = 0; i < 4; i++) {
var button = document.createElement("button");
button.classList.add("btn");
button.setAttribute("id", "answerBtns");
button.hasAttribute("data-correct");
button.setAttribute("data-correct", questions[count].answers[i].correct);
button.onclick = btnclick;
button.textContent = questions[count].answers[i].text;
answerContainer.appendChild(button);
}
}
// if user clicks on button check if true
function btnclick(e) {
e.preventDefault();
var value = event.target.dataset.correct;
scoreBox.textContent = "Score: " + score;
if (value === "true") {
score += 5;
document.body.style.background = "green";
} else {
document.body.style.background = "red";
}
var next = document.getElementById("answer-buttons");
var nextBtn = document.createElement("button");
nextBtn.classList.add("nextBtn");
nextBtn.textContent = "Next";
next.appendChild(nextBtn);
nextBtn.onclick = nextBtnFx;
if you want to see what I'm talking about, the app can be found here:
https://andrethetallguy.github.io/Animal-Quiz/
Thanks!!!
In the handler function nextBtnFx you could disable the button with
this.disabled = "true"
that would make it unclickable after the first click
ref: https://stackoverflow.com/a/17115132/13998159
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<input type="button" id="btn01" value="OK">
<button onclick="disableElement()">Disable</button>
<button onclick="enableElement()">Enable</button>
<script>
function disableElement() {
document.getElementById("btn01").disabled = true;
}
function enableElement() {
document.getElementById("btn01").disabled = false;
}
</script>
</body>
</html>
You can use these functions to disable/enable the buttons.

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

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