I need to show a div when a text box has a value of (as an example) "Hello", of course it does not really need "Hello" that's just an example. So, with JavaScript, I assume I can do this, but I am not very good with JavaScript and would like some help.
Without further clarity on exactly when you want this to occur, I'm unable to provide a specific answer, but for guidance the following should suffice:
var stringToMatch = 'hello',
input = document.getElementById('inputElementId'),
div = document.getElementById('divId');
input.onkeyup = function(e){
if (this.value == stringToMatch){
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
JS Fiddle demo.
In case you'd prefer case-insensitive matching:
var stringToMatch = 'hello',
input = document.getElementById('inputElementId'),
div = document.getElementById('divId');
input.onkeyup = function(e){
if (this.value.toLowerCase() == stringToMatch.toLowerCase()){
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
JS Fiddle demo.
References:
document.getElementById().
element.onkeyup.
element.style.
string.toLowerCase().
Maybe this is what you are looking for.
http://jsfiddle.net/dvZHx/
<div id="div2show">Show me</div>
<textarea id="text"></textarea>
input = document.getElementById('text'), div = document.getElementById('div2show');
input.onkeyup = function (e) {
if (this.value == 'hello') {
div.style.display = 'block';
}
};
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am really new to JS and I'm having some issues.
So I have this JS file: that is basically the same function repeating with different <div id="">.
var button = document.getElementById("obj-trigger");
button.onclick = function () {
var div = document.getElementById("obj-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("lineas-trigger");
button.onclick = function() {
var div = document.getElementById("lineas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("cultura-trigger");
button.onclick = function() {
var div = document.getElementById("cultura-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("igualdad-trigger");
button.onclick = function() {
var div = document.getElementById("igualdad-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("proyectos-trigger");
button.onclick = function() {
var div = document.getElementById("proyectos-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("estigmas-trigger");
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("soy-trigger");
button.onclick = function() {
var div = document.getElementById("soy-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
var button = document.getElementById("tudef-trigger");
button.onclick = function() {
var div = document.getElementById("tudef-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
And it works perfectly when I am using ALL the functions, however if I remove a <div> from my HTML, let's say: <div id="estigmas-trigger">, my JS will work until it reaches:
var button = document.getElementById("estigmas-trigger");
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none"
}
else {
div.style.display = "block";
}
};
All code below that will stop working, so no more collapsing. :(
Why is that? And... how can I fix it?
It's because button will be null if there are no element with id estigmas-trigger, and you should get error that you can't set value onclick on null, try adding a check to test if button is not null:
var button = document.getElementById("estigmas-trigger");
if (button) {
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
}
Your error is caused because when you remove an element from the HTML and then your Javascript tries to refer to that element without proper protections, it causes a script error and the script aborts execution because of the error.
The second thing you need to do when learning Javascript (after learning how to write your first script) is to learn how to check for errors in the debug console in the browser. That will show you when you have execution errors that are aborting your script and they will usually show you what line the error occurs on.
In this case, you would attempt to get a DOM element with a line such as:
var button = document.getElementById("estigmas-trigger");
And, then you would attempt to use the button variable. But, if the estigmas-trigger element was not in the page, then button would be null and it would be an error to reference a property of null such as .onclick.
In addition, your code is horribly repetitive. You really should never copy nearly identical code multiple times into your code. Instead, create a reusable function and use that function multiple places or if your code is almost entirely identical except for one input parameter (which is the case for you), then you can just put the one input parameter into an array and loop through the array.
Here's a much more DRY implementation (this replaces all of your code):
var buttons = ["obj-trigger", "lineas-trigger", "cultura-trigger",
"igualdad-trigger", "proyectos-trigger", "estigmas-trigger",
"soy-trigger", "tudef-trigger"];
buttons.forEach(function(id) {
var button = document.getElementById(id);
if (button) {
button.addEventListener("click", function(e) {
var cont_id = this.id.replace("trigger", "cont");
var elem = document.getElementById(cont_id);
if (elem) {
var style = elem.style;
if (style.display !== "none") {
style.display = "none";
} else {
style.display = "block";
}
}
});
}
});
Summary of changes:
Put all the trigger ID values into an array of strings so you can just loop through each one that you want to apply identical code to.
Use .forEach() to loop through the array of strings.
Get the DOM element for each id and check to see if it is present before trying to use it (this will solve your original problem).
Use .addEventListener() to add the click event handler as this is much more scalable than .onclick because you can have multiple click handlers for the same element this way. It is a generally good habit to switch to use .addEventListener().
Rather than refer to the xxx-cont ids by name, just derive them from the xxx-trigger ids using a simple text replacement. This saves more duplication and typing in your code.
Get the xxx-cont object in the DOM and also check to see if it exists before attempting to use it (safe coding).
One way is:
var button = document.getElementById("estigmas-trigger");
//that way you prevent define a function in a null object
if(button){
button.onclick = function() {
var div = document.getElementById("estigmas-cont");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
};
}
I tried this but obv it didnt work. Im very new to JS, how do I do this?
function test() {
if(document.getElementById('div1').style.display = 'block'){
document.getElementById('div1').style.display = 'none';
}
if(document.getElementById('div1').style.display = 'none'){
document.getElementById('div1').style.display = 'block';
}
}
The code you have (once corrected) will toggle visibility but won't make an element invisible on the 2nd time a user clicks on it.
I've set up a JSFiddle here that uses plain JavaScript in order to do what you're asking in the title of the question.
Let's assume that your HTML looks something like this, with a DIV that has a class name of "tester":
<div class="tester">This is a triumph.</div>
<p>I'm writing a note here; huge success</p>
One way of achieving this is to add a data element to the DIV to track the number of clicks and then, when the number of clicks hits two, we hide it. The code for that looks like this:
document.getElementsByClassName("tester")[0].onclick = function(targ) {
if(!targ.target.hasAttribute("data-click")) {
targ.target.setAttribute("data-click",0);
}
var currClicks = +targ.target.getAttribute("data-click");
if(currClicks==2){
targ.target.style.display = "none";
} else {
targ.target.setAttribute("data-click", currClicks+1);
}
};
Again, this will get you the functionality you asked about in your question but does not match your code sample as it doesn't really do what you want. If you need any more information on this feel free to ask, but I think this will get you what you're looking for.
It shouldn't be =, it should be == in JavaScript if condition and twice if condition always setting style.display = 'block', so either use else if or simply else.
<div id="div1" style="display:block"></div>
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else if(document.getElementById('div1').style.display == 'none') {
document.getElementById('div1').style.display = 'block';
}
}
or
function test() {
if (document.getElementById('div1').style.display == 'block') {
document.getElementById('div1').style.display = 'none';
}
else{
document.getElementById('div1').style.display = 'block';
}
}
I have this piece of code which i use for language toggling:
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
if(document.getElementById(varon).style.display == 'block'){
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
}
else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
}
}
and HTML:
<div id="mydivon" style="display:block">some language text</div>
<div id="mydivoff" style="display:none">some other language text</div>
Language1/Language2
and i would like to make toggle button switchable, when one Language1 is selected, switch toggle text to Language2 and vice versa. Some pointers would be welcome. Thx
I've setup a Fiddle , is this the effect you wanted to achieve? As #Shilly already said in the comments, you can use textContent to change the content of your anchor tag.
I've assigned an ID to your anchor #languageSwitch so I can do following stuff in your JS
HTML
<div id="mydivon" style="display:block">
Language 1 is selected
</div>
<div id="mydivoff" style="display:none">
Language 2 is selected
</div>
<a id="languageSwitch" href="#" onmousedown="toggleDiv('mydiv');">
Switch to Language2
</a>
JS
function toggleDiv(divid) {
varon = divid + 'on';
varoff = divid + 'off';
// Assign the switch anchor to a variable
var switcher = document.getElementById('languageSwitch');
if (document.getElementById(varon).style.display == 'block') {
document.getElementById(varon).style.display = 'none';
document.getElementById(varoff).style.display = 'block';
//Change the text to language1 (language 2 is active)
switcher.textContent = "Switch to Language1";
} else {
document.getElementById(varoff).style.display = 'none';
document.getElementById(varon).style.display = 'block'
//Change the text to language2 (language 1 is active)
switcher.textContent = "Switch to Language2";
}
}
As described by the OP in the comments:
Currently you're displaying an element on wether it's selected but the toggle itself isn't changing language.
Now what you can do is when you mousedown and execute toggleDiv(divid)
there should be a special variable to your disposal called this
this basically means "this called me" in the most simple form.
In your case this is the Language1/Language2 link
So what you could do then within your function:
function toggleDiv(divId) {
//also highly recommend you cache your variables
varon = document.getElementById(divId + 'on');
varoff = document.getElementById(divId + 'off');
if (varon.style.display == 'block') {
varon.style.display == 'none';
varoff.style.display = 'block';
this.innerHTML = varoff.innerHTML; // <- selected element value injected in bound button
} else
varon.style.display == 'block';
varoff.style.display = 'none';
this.innerHTML = varon.innerHTML; // <- selected element value injected in bound button
}
With the line this.innerHTML = varon/off.innerHTML you're saying, "the element that called me has to have the value of the block element"
The value will still default be Language1/Language2 but as soon as you change it it will update.
Hope it helps!
NOTE: UNTESTED
Step 1: Add an id to your link:
<a id="toggle-language" href="#" onmousedown="toggleDiv('mydiv');">Language1/Language2</a>
Step 2: Change your function to:
function toggleDiv(divid) {
var on = document.getElementById(divid + 'on'),
off = document.getElementById(divid + 'off'),
language = document.getElementById('toggle-language');
if (on.style.display == 'block'){
on.style.display = 'none';
off.style.display = 'block';
language.textContent = 'Language 2';
}
else {
on.style.display = 'block';
off.style.display = 'none';
language.textContent = 'Language 1';
}
}
I have a small bit of javascript for showing and hiding a div.
function hidefooter(){
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
}
The div starts {display:none;}. I looked around online and could only find people saying it was an html thing. My problem with that was that when i first wrote it the "block" and "none" values were switched and it took 3 clicks to work. Any help would be great.
update: A better explanation. This code does exactly what i want but you have to click twice to get the effect to work. At first i had the "block" and "none" properties switched and it took 3 clicks to get it to work. The footer starts out {display:none;}. I put it up online so a friend could take a look at it. the url is http://www.miettegoesplaces.com. click on the purple foot button on the right.
update 2: sorted the problem was i was calling the onClick twice. this is the simplified working version.
function hideFooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
thanks for everyones comments and advice.
You have added click event twice here.
First, you are calling onClick event on button.
Inside hidefooter() function, you have defined button.onclick = function() {...}
remove button.onclick = function() {} and use like this :
function hidefooter(){
var button = document.getElementById('footerbutton');
var div = document.getElementById('footerbox');
if (div.style.display != 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
Here is the working fiddle.
you need to add "display: none" to your footer's style
You can use window.getComputedStyle(elem) for Firefox, Opera, Safari and Chrome or elem.currentStyle for IE
var button = document.getElementById('footerbutton');
button.onclick = function() {
var div = document.getElementById('footerbox');
var style = window.getComputedStyle(div);
if (style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
Just remove the code that you use to define a button that handles events and add an onClick() event to your button instead
This code will work as you want it
function hidefooter(){
var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
But make sure your button code looks like this:
<button id="footerbutton" onClick="hidefooter()">Hide Footer</button>
Pay attention to onClick="hidefooter()"
And make sure your div is still display:none;
I believe the problem was that you're using the 'hide' button to define what it does and THEN do the hiding work. You should add an event handler that calls the hidefooter() function instead which has nothing but the footer hiding code.
I have this script on dynamic radio buttons... On load the divs display, great. One is automatically checked, great. If I click the other radio button the divs hide, great. When I click back to the main radio button to show the divs again the divs don't reappear.
How do I get the divs to reappear (show)?????
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if ("hideRow") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
Try :
function hide() {
var ele = document.getElementById("hideRow");
var coup = document.getElementById("coup");
if (ele.style.display == "block") {
ele.style.display = "none";
coup.style.display = "none";
} else {
ele.style.display = "block";
coup.style.display = "block";
}
}
This is always true:
if ("hideRow") {
// Always executes
}
So, you only ever get to the if-block. You need to change the conditional on your if-statement.
if (ele.style.visibility == 'visible';) {
ele.style.visibility = 'hidden';
coup.style.visibility = 'hidden';
} else {
ele.style.visibility = 'visible';
coup.style.visibility = 'visible';
}
I may have entirely missed the mark and not understood what your trying to do, but that's the way I'd do it (I think - you may be trying to do something else).