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
Related
I want the text appears when I click the button then disappear again when I click the same button again by javascript:
const firstclick = document.querySelector('.btn-story');
const hidecontenttwo = document.querySelector('.hide-content-two');
function revealcontentTwo(){
if(firstclick.classList.contains('hidecontenttwo')){
hidecontenttwo.style.display='none';
}
else{
hidecontenttwo.style.display='block';
}
}
firstclick.addEventListener("click",revealcontentTwo);
You can use classList & toggle methods:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
const btn = document.querySelector('#btn-story');
function toggleShowContent(){
const content = document.querySelector('#content');
content.classList.toggle('hide')
}
btn.addEventListener("click", toggleShowContent);
.hide {
display: none;
}
<button id="btn-story">Toggle</button>
<p id="content" class="hide">Content</p>
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>
I have four buttons, each of these is different than others.
What I want:
When I click on the button I want to add to this button a class named 'togglemath' and exactly in the same time I want to remove class from the three left buttons ( of course if the buttons has a classname 'togglemath')
I know that the code below is bad, but I put this here to understand what I mean.
const sumButton = document.getElementById('add');
const substractButton = document.getElementById('subtract');
const multipleButton = document.getElementById('multiple');
const divideButton = document.getElementById('divide');
const mathButtons = [sumButton, substractButton, multipleButton, divideButton];
const activeClass = () => {
mathButtons.forEach(el => {
el.addEventListener('click', e => {
[e.target, ...rest] = mathButtons;
e.target.classList.add('togglemath');
rest.classList.remove('togglemath');
});
});
};
activeClass();
Lets make for example 3 buttons:
<button class="toggle">1</button>
<button class="toggle">2</button>
<button class="toggle">3</button>
<button class="toggle">4</button>
As far as I understand you need to remove class togglemath from all the buttons except the one that you clicked on. Then we can do something like this:
const TOGGLE_CLASS_NAME = 'togglemath';
const $buttons = document.getElementsByClassName('toggle');
function toggleClass(event) {
for (const $button of $buttons) {
$button.classList.remove(TOGGLE_CLASS_NAME);
}
event.target.classList.add(TOGGLE_CLASS_NAME);
}
for (const $button of $buttons) {
$button.addEventListener('click', toggleClass);
}
First remove the class from all the elements when a button is clicked and then add the class to the clicked button:
const sumButton = document.getElementById('add');
const substractButton = document.getElementById('subtract');
const multipleButton = document.getElementById('multiple');
const divideButton = document.getElementById('divide');
const mathButtons = [sumButton, substractButton, multipleButton, divideButton];
mathButtons.forEach(button => button.addEventListener('click', activeClass))
function activeClass() {
mathButtons.forEach(button => button.classList.remove('togglemath'));
event.target.classList.add('togglemath');
}
.togglemath {
color: red;
}
<button id="add">add</button>
<button id="subtract">subtract</button>
<button id="multiple">multiple</button>
<button id="divide">divide</button>
You are not far from the actual solution. The problem seems to be with the understanding of the following line:
[e.target, ...rest] = mathButtons;
This doesn't search the e.target out of mathButtons and assigns the other elements to rest. But instead assigns e.target to the first element in mathButtons and rest to the second, third end fourth. This produces the follow-up problem that e.target.classList.add('togglemath') will always add the class to the first button.
rest.classList.remove('togglemath') has a somewhat other issue, namely that you try to access classList on an array. Instead you should access it for element in the array.
Without changing your code much you could be looking at something like this:
const sumButton = document.getElementById('add');
const substractButton = document.getElementById('subtract');
const multipleButton = document.getElementById('multiple');
const divideButton = document.getElementById('divide');
const mathButtons = [sumButton, substractButton, multipleButton, divideButton];
const activeClass = () => {
mathButtons.forEach(el => {
el.addEventListener('click', e => {
mathButtons.forEach(mathButton => {
mathButton.classList.remove('togglemath');
});
e.target.classList.add('togglemath');
});
});
};
activeClass();
This solution first removes all togglemath classes from all buttons. Then adds it (back) to the clicked target.
Strafing somewhat from what you've provided, you could opt to save the active button in a variable. This way you only have to remove the class from the current active button, add it to the event target, and replace the active variable with the clicked target.
const sumButton = document.getElementById('add');
const substractButton = document.getElementById('subtract');
const multipleButton = document.getElementById('multiple');
const divideButton = document.getElementById('divide');
const mathButtons = [sumButton, substractButton, multipleButton, divideButton];
const activeClass = () => {
let active;
mathButtons.forEach(button => {
button.addEventListener('click', event => {
if (event.target === active) return;
if (active) active.classList.remove('togglemath');
event.target.classList.add('togglemath');
active = event.target;
});
});
};
activeClass();
button {
border: 1px solid #33497b;
padding: 0.25em 1em;
background-color: white;
color: #33497b;
}
button.togglemath {
background-color: #33497b;
color: white;
}
<button id="add" type="button">+</button>
<button id="subtract" type="button">−</button>
<button id="multiple" type="button">×</button>
<button id="divide" type="button">÷</button>
I have a button on my page. And I would like that button to change language every 2/4 seconds with Javascript. e.g. When the page loads the text of the button will be search, and after 2 or 4 seconds it will change to other languages. It doesn't need to be an infinite loop, just the most simple.
HTML:
<button id="search" name="q">search</button>`
Javascript:
var x = document.getElementById('search');
//after 2 seconds:
x.innerHTML="Suchen";
//And so on
This is the most robust and simple solution for your problem. JSFIDDLE.
Loop through a predefined language dictionary using setInterval()
var x = document.getElementById('search'),
// dictionary of all the languages
lan = ['Search', 'Suchen', 'other'],
// hold the spot in the dictionary
i = 1;
setInterval(function (){
// change the text using the dictionary
// i++ go to the next language
x.innerHTML = lan[i++];
// start over if i === dictionary length
i = lan.length === i ? 0 : i;
}, 2000);
> Demo : http://jsfiddle.net/JtHa5/
HTML
<button id="search" name="q">Search</button>`
Javascript:
setInterval(changeButtonText, 2000);
function changeButtonText()
{
var btnTxt = document.getElementById('search');
if (btnTxt.innerHTML == "Search"){
btnTxt.innerHTML = "Suchen";
}
else{
btnTxt.innerHTML = "Search";
}
}
Use setInterval.
setInterval(function() {
var btn = document.getElementById('search');
if (btn.innerHTML == "search")
btn.innerHTML = "Suchen";
else
btn.innerHTML = "search";
}, 2000);
You could also change the button to an input and use the value property instead of the innerHTML property.
Here's the Javascript:
function changeButton() {
var btn = document.getElementById('myButton');
if (btn.value == "Search")
btn.value = "Suchen";
else
btn.value = "Search";
}
setInterval(changeButton, 2000);
And the HTML
<input type="button" id="myButton" value="Search" />
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.