So I have got this HTML-Code
<button id="demo" onclick="toogleFunction()">Login</button>
and this JS-Code
function toogleFunction()
{
var x = document.getElementById('but_login');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
document.getElementById("demo").innerHTML = "Insert your data!";
}
The code does what it sould do:
- it is showing me the spoiler
- the name changes
My question is: How can I do it so that it changes the name back to "login", when I click again on the button, or when I click on another button.
Thanks!
function toogleFunction()
{
var x = document.getElementById('but_login');
var demo = document.getElementById("demo")
var text = demo.innerText;
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
if(text === "Login"){
demo.innerText = "Insert your data!";
}else{
demo.innerText = "Login";
}
}
Related
$("#menu").click(function () {
var x = document.getElementById("sideMenu");
var y = document.getElementById("content");
if (x.style.display === "none") {
x.style.display = "block";
y.style.marginLeft = "320px";
} else {
x.style.display = "none";
y.style.marginLeft = "0px";
}
});
Here is my java script code now I want to convert this into react.
Actually you have to create components each of dom elements and render them conditionally. Looks something like this.
function Menu() {
function clickHandler() {
// your logic
}
<div id="menu" onClick={clickHandler}>YOUR MARKUP</div>
}
This is how , it would look in react .
import React from 'react'
const Menu = ()=>{
var x = document.getElementById("sideMenu");
var y = document.getElementById("content");
const handleClick = ()=>{
if (x.style.display === "none") {
x.style.display = "block";
y.style.marginLeft = "320px";
} else {
x.style.display = "none";
y.style.marginLeft = "0px";
}
}
return (
<div id="menu" onClick={handleClick}>Menu</div>
)
}
You are gonna set onClick on your #menu:
const x = document.getElementById("sideMenu");
const y = document.getElementById("content");
const handleClick = () => {
if (x.style.display === "none") {
x.style.display = "block";
y.style.marginLeft = "320px";
} else {
x.style.display = "none";
y.style.marginLeft = "0px";
}
}
.
.
.
<div id="menu" onClick={handleClick}> something </div>
Trying to display a different image in a different location when clicked, this is an interval set to 10ms and when the value changes it should switch up the divs, one being none, and one boxed.
function test() {
var x = document.getElementById('spc_02');
var y = document.getElementById('purchase_01');
if (rest === 0) {
x.style.display = "none";
y.style.display = "boxed";
}
if (rest === 1) {
x.style.display = "boxed";
y.style.display = "none";
}
var x = document.getElementById('spc_03');
var y = document.getElementById('purchase_02');
if (news === 0) {
x.style.display = "none";
y.style.display = "boxed";
} if (news === 1) {
x.style.display = "boxed";
y.style.display = "none";
}
}
I have the code below for showing/hiding html sections on button click using javascript. In addition to hiding the section, when an alternative button is clicked, I also want to reset the specific fields to their default values but I'm struggling to do so.
function Prefs() {
var x = document.getElementById('continents');
var y = document.getElementById('countries');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
}else if(x.style.display === 'block'){
x.style.display = 'none';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
I would do something like this,
function Prefs() {
var x = document.getElementById('continents');
var y = document.getElementById('countries');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
x.value = "";
y.value = "";
}else if(x.style.display === 'block'){
x.style.display = 'none';
y.style.display = 'none';
x.value = "";
y.value = "";
} else {
x.style.display = 'none';
}
}
If you want reset entire form use reset() method:
$('#yourFormId')[0].reset();
Or if you want reset specific input just use defaultValue propertie:
$("#yourInput").prop("defaultValue");
I'm not a programmer so I hope you will pardon me if I will write not correct things.
I have two fieldset with two different "id"
I tried to write a code in javascript that when I show the 1st the 2nd will be hided and viceversa.
I can't understand where I'm doing wrong.
Can you help me?
Here html
<label onclick="add()"></label>
<label onclick="modify()"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
and here my javascript text
function add() {
var x = document.getElementById('add');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function modify() {
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
the problem is that not only I would like that when I do click on the first it open and with another click it will close but also that when 1 fieldset is shown, the other will be hided and viceversa.
Thank you
You can use below function
function hideShow(targetId) {
var targetNode = document.getElementById(targetId);
if(targetNode.style.display === 'block') {
return; // If click is on the node which is already shown, just return
}
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
y.style.display = 'block';
x.style.display = 'none';
}
}
And use same function for both,
<label onclick="hideShow('add')"></label>
<label onclick="hideShow('modify')"></label>
<fieldset id="add">some text</fieldset>
<fieldset id="modify">some other text</fieldset>
You need to define x in your modify function. Or like #ibrahim said, just defined both variables outside the sope
function modify() {
var y = document.getElementById('modify');
var x = document.getElementById('add')
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
Simple fix, if you want to get working.
function add() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
function modify() {
var x = document.getElementById('add');
var y = document.getElementById('modify');
if (y.style.display === 'none') {
y.style.display = 'block';
x.style.display = 'none';
} else {
y.style.display = 'none';
}
}
As you can see both has x and y var so that none of them is undefined. To move to clean code, you may wish to bring the var outside of the methods(reduce redundancy of the code)
var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.