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" />
Related
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>
Trying to make it so this counter with buttons increases or decreases based on clicks, however on the first click the counter doesn't increase. If I do + 1 it will but then will stop. ++works but only after first click. Trying to learn easy way to resolve my code that isn't a drastic change.
https://jsfiddle.net/sy0ohtrc/
var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.innerHTML = pageCount;
//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);
function nextPage() {
var elPageIncrease = document.getElementById("currentPage");
elPageIncrease.innerHTML = pageCount++;
}
var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);
function prevPage() {
var elPageDecrease = document.getElementById("currentPage");
elPageDecrease.innerHTML = pageCount--;
}
You should use --/++ before the counter because when you use the increment/decrement operator after, the value will be returned before the it increased/decreased.
AND there is no need for declaring 3 time the same element.
Finally change the innerHTML to textContent (and if you want to know why read this thread).
Your code should look something like that:
var pageCount = 1;
var elPage = document.getElementById("currentPage");
elPage.textContent = pageCount;
//Get next button and add connect function on click
var elNext = document.getElementById("nextButton");
elNext.addEventListener("click", nextPage);
function nextPage() {
// var elPageIncrease = document.getElementById("currentPage"); you have elPage already pointing this element
elPage.textContent = ++pageCount;
}
var elPrev = document.getElementById("prevButton");
elPrev.addEventListener("click", prevPage);
function prevPage() {
// var elPageDecrease = document.getElementById("currentPage"); you have elPage already pointing this element
elPage.textContent = --pageCount;
}
<div class="pager">
<button id="prevButton">prev</button>
<p class="pageNumber" id="currentPage"></p>
<button id="nextButton">next</button>
</div>
I developed a party-game just for fun, and can't solve this problem. So, at first I ask user "How many clothes you want to see?". I set that data to local storage, and use on other page. So my problem is: I want to show only user selected number of elements in array (I'm so sorry for my bad english, I really need your help). Here are my codes:
index.html
<div class="container">
<div class="small-container">
<p id="text">How many clothes you want to choose ?</p>
<input type="number" placeholder="1 to 6" id="count" />
</div>
<button id="btn">Start</button>
</div>
script1.js
window.onload = function() {
var btn = document.getElementById("btn");
var count = document.getElementById("count");
btn.addEventListener("click", function() {
document.location.href = "random.html";
localStorage.setItem("count", count.value);
});
};
game.html
<div class="small-container">
<p id="text">Your random clothes: </p>
<img id="img" />
</div>
script2.js
var options = [
"T-Shirt",
"Singlet",
"Underwear",
"Socks",
"Shorts",
"Shoes"
];
var btn = document.getElementById("btn");
var text = document.getElementById("text");
var img = document.getElementById("img");
btn.addEventListener("click", function() {
var count = localStorage.getItem("count");
var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
btn.innerHTML = "Shuffle";
text.innerHTML = randomChoice;
img.setAttribute("src", `img/${randomChoice}.png`);
if (randomChoice >= options.length) {
text.innerHTML = "End of game :)";
btn.innerHTML = "Start again";
img.removeAttribute("src");
btn.addEventListener("click", function() {
// document.location.href = "intro.html";
document.location.href = "random.html";
});
}
});
};
So every time user clicks the button, clothes are changing. For example, if user was chosen 4 as count, I want to show him/her only 4 clothes, and they must see before every click just one image on their pages.
If i understood ur question correctly, your issue was that you didnt know how to stop the game once the good amount of clothes has been shown
Here is a solution
btn.addEventListener("click", function() {
var count = localStorage.getItem("count");
localStorage.setItem("count", count-1); //decreasing the value of count because one clothe is about to be shown on screen
if (count == 0) { //if count is at 0, that means game is over
text.innerHTML = "End of game :)";
btn.innerHTML = "Start again";
img.removeAttribute("src");
btn.addEventListener("click", function() {
// document.location.href = "intro.html";
document.location.href = "random.html";
});
}
else{ //we show a new cloth
var randomChoice = options.splice(Math.floor(Math.random() * options.length), 1);
btn.innerHTML = "Shuffle";
text.innerHTML = randomChoice;
img.setAttribute("src", `img/${randomChoice}.png`);
}
});
But with that code its still possible that the same cloth is picked several times.
To avoid that, while keeping the code in pure javascript, I guess you could use "hidden" inputs to store the clothes that have been shown, or other localStorage variables.
This is a super basic counter which just counts the button clicks. Below is the body of my html.
<body>
<div class="wrapper" ><button id="but"> Click</button></div>
<h2><div class="counter"> Counter: <span id = "countNum"> 0 </span></div></h2>
<script type="text/javascript">
var button = document.getElementById('but');
var counter = document.getElementbyId('countNum');
var count = 0;
button.onClick = function() {
count += 1;
counter.innerHTML = count;
};
</script>
</body>
However, there is simply no change on my counter when I click the button. I've tried placing output statements in the start of the script but they don't show up either. Have I placed it wrong? Is it an error with my code?
I've gone through all the similar posts but cannot figure out my error.
You misspelled quite a few functions here.
Here is the correct javascript code.
Please note that its case sensitive, i.e. document.getElementbyId is not the same as document.getElementById, and button.onClick is not the same as button.onclick.
var button = document.getElementById('but');
var counter = document.getElementById('countNum');
var count = 0;
button.onclick = function() {
count += 1;
counter.innerHTML = count;
};
I have a JavaScript variable:
var setClickTime = "2000";
I would like to give the user a choice of 2000 or 4000 based on their preference by clicking a button.
What is the best way to allow the user to change this variable? I have considered having two buttons one of which will have the class active when clicked. That would require me to set up an if / else statement to change the variable based on which button is active. But I am new to this and I do not know the best approach.
Just give your buttons IDs and bind listeners.
Say, you have two buttons id="setTime2000" and id="setTime4000", then you just need:
HTML Code:
<div>
<button id="setTime2000">Set time as 2000</button>
<button id="setTime4000">Set time as 4000</button>
</div>
JS Code:
$(document).ready() {
var mTime = 2000; // set the default value of time
$("#setTime2000").click(function () {
mTime = 2000;
}
$("#setTime4000").click(function () {
mTime = 4000;
}
// ... do something with the variable set
}
Do you just want a button event listener to change it:
<button id="changeBtn">4000</button>
JS
var setClickTime = "2000";
$("#changeBtn").click(function() {
setClickTime = "4000";
})
First, you have a JavaScript variable, it has nothing to do with jQuery.
Then, if you want something easy, without dependencies. Here a simple example:
var myValue = 2000;
updateOutput();
a.addEventListener('click', function() {
myValue = 2000;
updateOutput()
});
b.addEventListener('click', function() {
myValue = 4000;
updateOutput()
});
function updateOutput() {
output.value = myValue;
}
<button id="a">2000</button>
<button id="b">4000</button>
<input readonly id="output">
A generic answer in pure javascript.
<button class='setTime'>
2000
</button>
<button class='setTime'>
4000
</button>
Pure Javascript:
var setClickTime = "";
var buttons = document.getElementsByClassName('setTime')
for (i = 0; i < buttons.length; i++) {
this.onclick = function setTime(event) {
setClickTime = event.target.innerHTML;
alert(setClickTime);
}
}
fiddle: https://jsfiddle.net/b1vy8ahp/
You can define multiple radio buttons for more options ( with same name attribute to group them ) and then just delegate or bind a change event on that group of radios buttons to get the selected value.
<input type="radio" name="test" value="2000">2000
<input type="radio" name="test" value="4000">4000
<script>
var setClickTime;
$('input:radio[name=test]').on('change',function()
{
setClickTime = this.value;
});
</script>
Example : https://jsfiddle.net/DinoMyte/71hgeqnb/1/