HTML/JS: Change inner.HTML and reset it back - javascript

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

Try to convert in react js

$("#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>

style.display = "boxed"; isnt working

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";
}
}

Resetting a single form field onclick?

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");

How to switch show/hide tags

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)

Can somebody teach me how to reset the menu?

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.

Categories