Only started JS a couple of days ago, and I'm already having some troubles getting a toggle to work. I want the button to toggle between on and off when clicked.
function click() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on"); {
change.innerHTML = "off";
} else {
change.innerHTML = "on";
}
}
<button type="button" id="toggle" onClick="click()">on</button>
Is this how I should go about it?
try this
<!DOCTYPE html>
<html>
<body>
<button id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
</body>
</html>
define your function to be unique as always
and not make use of the javascript function/reserve words
just a recommendation/suggestion
Your having mistake in the if statement,there is no semicolon after if statement
write the code as like below
<button name="toggle" id="toggle" onclick="myFunction()">on</button>
<script>
function myFunction() {
var change = document.getElementById("toggle");
if (change.innerHTML == "on")
{
change.innerHTML = "off";
}
else {
change.innerHTML = "on";
}
}
</script>
You can do this:
<button type = "button" id= "toggle" onClick = "click()">on</button>
function click()
{
var change = document.getElementById("toggle");
if (change.value == "on")
{
change.value = "off";
}
else
{
change.value = "on";
}
}
or by doing this:
function click()
{
if (this.value=="on")
{
this.value = "off";
}
else
{
this.value = "on";
}
}
It will work for you
function myFunction()
{
var change = document.getElementById("toggle");
if (change.value=="off") change.value = "on";
else change.value = "off";
}
for button
<input type="button" value="on" id="toggle" onclick="myFunction()">
Related
Trying to display different messages inside the p element for when someone clicks on one of the three buttons. But it only displays the first message (reply) for all the buttons.
Can't see what I have done wrong...
HTML
<div class="options">
<div id="good" class="btn"></div>
<div id="idk" class="btn"></div>
<div id="bad" class="btn"></div>
</div>
JavaScript
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;
document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", () => {
if (good.clicked = true) {
main.style.display = "block";
reply = "Hey";
} else if (idk.clicked = true) {
main.style.display = "block";
reply = "Well yeah";
} else if (bad.clicked = true) {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});
const good = document.getElementById("good");
const idk = document.getElementById("idk");
const bad = document.getElementById("bad");
const main = document.querySelector(".main");
const reply = document.getElementById("reply");
const messageTypes = {
good: 'Hey',
idk: 'Well yeah',
bad: '123 BAD'
};
[good, idk, bad].forEach(option => {
option.addEventListener("click", (e) => {
reply.innerHTML = messageTypes[e.target.id];
});
});
<div class="options">
<button id="good" class="btn">good</button>
<button id="idk" class="btn">idk</button>
<button id="bad" class="btn">bad</button>
</div>
<div class="main"><div>
<div id="reply"></div>
Use const for everything, create a separate message dictionary for every message and just map it against the id. You don't need to use jQuery.
If your real use case is as simple as your example, I would consider maybe using different event listeners with different logic inside them. But if you want to use the same event listener, then you can use event.target.id to know which button was clicked:
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
switch (event.target.id) {
case "good":
reply = "Hey";
break;
case "idk":
reply = "Well yeah";
break;
case "bad":
reply = "123";
break;
}
main.style.display = "block";
document.getElementById("reply").innerHTML = reply;
});
});
Here you can see it working (note that I removed main.style.display = "block"; in the following example since I don't know what main is in your original code):
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
switch (event.target.id) {
case "good":
reply = "Hey";
break;
case "idk":
reply = "Well yeah";
break;
case "bad":
reply = "123";
break;
}
document.getElementById("reply").innerHTML = reply;
});
});
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div id="reply"/>
It could be something like that:
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
let reply;
[good, idk, bad].forEach(option => {
option.addEventListener("click", (e) => {
if (e.target == good) {
main.style.display = "block";
reply = "Hey";
} else if (e.target == idk) {
main.style.display = "block";
reply = "Well yeah";
} else if (e.target == bad) {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});
<div class="options">
<div id="good" class="btn">good</div>
<div id="idk" class="btn">idk</div>
<div id="bad" class="btn">bad</div>
</div>
<div class="main"><div>
<div id="reply"></div>
I'd be tempted to use explicit event handlers for each of the buttons rather than a generic handler that then tests all three conditions.
You can reduce the code duplication by using a function to handle the display update of the main element and the setting of reply.
Something like the following shows this in action:
let good = document.getElementById("good");
let idk = document.getElementById("idk");
let bad = document.getElementById("bad");
let main = document.querySelector(".main");
good.addEventListener("click", function(e) {
showMain("Good");
});
idk.addEventListener("click", function(e) {
showMain("Well yeah");
});
bad.addEventListener("click", function(e) {
showMain("123");
});
function showMain(replyText) {
main.style.display = "block";
document.getElementById("reply").innerHTML = replyText;
}
.main {
background-color: red;
display: none;
height: 100px;
width: 100px;
}
<button id="good">Good</button>
<button id="idk">Idk</button>
<button id="bad">Bad</button>
<div class="main"></div>
<div id="reply"></div>
You can instead, do something like this for what you want
In Pure VanillaJS
[document.getElementById("good"), document.getElementById("idk"), document.getElementById("bad")].forEach(option => {
option.addEventListener("click", (event) => {
if (event.target.id == "good") {
main.style.display = "block";
reply = "Hey";
} else if (event.target.id == "idk") {
main.style.display = "block";
reply = "Well yeah";
} else if (event.target.id == "bad") {
main.style.display = "block";
reply = "123";
}
document.getElementById("reply").innerHTML = reply;
});
});
= is used for assignments however == is used to check equality of two strings in javascript
[] ...addEventListener("click", (e) => {
if (good.id == e.target.id) {
main.style.display = "block";
reply = "Hey";
}
// and so on
document.getElementById("reply").innerHTML = reply;
});
var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
var btn3=document.getElementById('btn3')
// jquery way
$('.btn').on("click",function(e){
$("#msg").html(e.target.id+" clicked");
})
// javascript way
var classname = document.getElementsByClassName("btn");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener("click", function(e){
document.getElementById('msg').innerHTML =e.target.id+' clicked';
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="button" id="btn1" class="btn" value="button 1">
<input type="button" id="btn2" class="btn" value="button 2">
<input type="button" id="btn3" class="btn" value="button 3">
<p id="msg"></p>
It works... but i want to change the default to hidden.
Click first time to show the hidden text
<script>
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'block')) {
document.getElementById(itemID).style.display = 'display';
} else {
document.getElementById(itemID).style.display = 'display';
}
}
</script>
<button onclick="displayRow('1')">Show/Hidden text</button>
Simply set your display to hidden by default
<button style='display: hidden;' onclick="displayRow('<? echo $element ?>')" class='no-print'>Show/Hidden text</button>
and the js
function displayRow(itemID){
var el = document.getElementById(itemID);
if ((el.style.display == 'hidden')) {
el.style.display = 'block';
} else {
el.style.display = 'hidden';
}
}
function displayRow(itemID){
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = 'block';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
<table>
<tr style="display:none" id="1">
<td>Test</td>
</tr>
</table>
<button onclick="displayRow('1')">Show/Hidden text</button>
Use "none" instead "hidden", and put style="display: none" to the element which want to hide by default
function displayRow(itemID){
if (document.getElementById(itemID).style.display == 'block') {
document.getElementById(itemID).style.display = 'none';
} else {
document.getElementById(itemID).style.display = 'block';
}
}
Searched around and couldn't find what I was looking for. I have 2 buttons that pull up a two different select boxes on a click and they will disappear with a second click. However, I want select box 1 to disappear on Button click 2 and vice versa: select box 2 will disappear on Button click 1.
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>
Like this? https://jsfiddle.net/o3btLkpd/
try calling this at the top of the event handler for button 1:
document.getElementById('name2').style.display = 'none';
and this in the handler for button 2:
document.getElementById('name1').style.display = 'none';
the full resulting code would be like this:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
I created a 2 simple functions but function 2 doesn't work, I tried to change it to style.font-weight = "bold"; but then all crashes, what to do?
function validate() {
if (document.getElementById('remember').checked) {
document.getElementById("text").innerHTML = "HELLO WORLD!";
} else {
document.getElementById("text").innerHTML = "hello world!";
}
}
function validate2() {
if (document.getElementById('remember2').checked) {
document.getElementById("text").style = "bold";
} else {
document.getElementById("text").style = "normal";
}
}
<div id="text" style="font-weight: normal">hello world!</div>
<input id="remember" type="checkbox" onclick="validate()">Caps</input>
<br>
<input id="remember2" type="checkbox" onclick="validate2()">Bold</input>
Is that a chrome problem or something?
You aren't specifying the css property to be changed:
document.getElementById("text").style.fontWeight = "bold";
Javascript uses camelCase instead of a dash(camel-case), as CSS does, so style.font-weight is invalid.
var textEl = document.getElementById("text");
function validate() {
if (document.getElementById('remember').checked) {
textEl.innerHTML = "HELLO WORLD!";
} else {
textEl.innerHTML = "hello world!";
}
}
function validate2() {
if (document.getElementById('remember2').checked) {
textEl.style.fontWeight = "bold";
} else {
textEl.style.fontWeight = "normal";
}
}
<div id="text">hello world!</div>
<input id="remember" type="checkbox" onclick="validate()" /> Caps
<br/>
<input id="remember2" type="checkbox" onclick="validate2()" /> Bold
Also note that your <input> syntax is incorrect, inputs are self-closing tags and their text is set with the value attribute(in this case the input is a checkbox, and can't have a value):
<input id="remember2" type="checkbox" onclick="validate2()" />Bold
use this may help you
function validate2() {
if (document.getElementById('remember2').checked) {
document.getElementById("text").style.fontWeight = "bold";
}
else {
document.getElementById("text").style.fontWeight = "normal";
}
}
function validate2() {
if (document.getElementById('remember2').checked) {
document.getElementById("text").style.fontWeight = "bold";
}
else {
document.getElementById("text").style.fontWeight = "normal";
}
}
You were not setting the correct style property.
var text = document.getElementById("text");
function validate(checkbox) {
if (checkbox.checked) {
text.innerHTML = text.innerHTML.toUpperCase();
} else {
text.innerHTML = text.innerHTML.toLowerCase()
}
}
function validate2(checkbox) {
if (checkbox.checked) {
text.style.fontWeight = "bold";
} else {
text.style.fontWeight = "normal";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="text" style="font-weight: normal">hello world!</div>
<input id="remember" type="checkbox" onclick="validate(this)">Caps</input>
<br>
<input id="remember2" type="checkbox" onclick="validate2(this)">Bold</input>
<script>
</script>
</body>
</html>
i made this little script to learn javascript. but i keep getting unexpected token switch..
but hoe do is set switch the corect way??
html:
<p id="new">test<p>
<input id="button" type="submit" name="button" value="enter" />
js:
var switch = true;
if (switch == false){
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = "Mijn Naam!";
var switch = true;
};
} else {
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = "shiva";
var switch = false;
};
}
how about:
<p id="new">test<p>
<input id="button" type="submit" name="button" value="enter" />
var clicked = false;
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML = clicked ? "shiva" : "Mijn Naam!";
clicked = !clicked;
};
switch is a reserved word. You should use some variable name else.
By the way, your code is possible to be compressed as follows:
var switchOn = true;
document.getElementById('button').onclick = function() {
document.getElementById("new").innerHTML =
switchOn ? "shiva" :"Mijn Naam!";
switchOn = !switchOn;
}