How to toggle javascript buttons as off when page loads? - javascript

I'm trying to create a website that uses a hint button and a solution button to each of the problems it provides. I'm using a javascript function and a button that shows a new div when clicked, but it automatically shows the hint and solution as the page loads.
Is there a way I can set it so all buttons are automatically hidden? Or maybe can I get the function to run once as the page loads, I think that would work. Any ideas?
<button onclick="hint0()">Hint</button>
<div id="hint0">
Try reading the man pages for some of the listed commands on the OverTheWire level page. They may be useful!
</div>
<script>
function hint0() {
var x = document.getElementById("hint0");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Without seeing your code, it's a little difficult to give any feedback, but I can suggest a few things. You can use css to hide your hint and solutions - setting the display to none would be the easiest. The hints and solutions would be visible to anyone who viewed the page source or inspected the elements, if you only hide them. You could write an empty hint and solution container into your markup and then add the hint and solution text when the user interacts with the button. With Javascript or jQuery, on your click event, append the hint or solution to the DOM or set the innerHTML of the element.
Ok, I see your example code now - you can set a function to run on load and select your element by id and set it to display none. This page can help you understand the load event - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

I think you mean to hide content of div not the buttons, just set your items to: style="display:none" inline.
function solution0() {
var x = document.getElementById("solution0");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function hint0() {
var x = document.getElementById("hint0");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="hint0()">Hint</button>
<div id="hint0" style="display:none">
Try reading the man pages for some of the listed commands on the OverTheWire level page. They may be useful!
</div>
<button onclick="solution0()">Solution</button>
<div id="solution0" style="display:none">
You need to use cat to print the contents of the file "readme". The file contains the password that you can copy and paste to log in to bandit1.
</div>

Use CSS in the header (not as a <link>, but actually inlined) to force those components hidden, then use JavaScript to show them later.
example:
.my-secret-div {
display:none;
}
...
<div class="my-secret-div"> the hint goes here </div>
...
Then use Javascript to remove the my-secret-div class.
Note that this doesn't hide the content from someone who could download the page or "inspect" the content using the browser developer tools.
Example fiddle: https://jsfiddle.net/5qnoghrf/

Related

the page keeps on reloading when i press the onclick button

i cant figure out how to stop the page reloading when i press the on click button... please if anyone can help tell me:)
(this is in html)
<button on click="My Function()">Try it</button>
<script>
function My Function() {
var x = document.get_Element_By_Id("mountain_bikes");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<script>
document.get_Element_)By_Id("mountain_bikes").style.display = "none";
i thought that this would show and hide when i toggle try it but it reloads the page every time i toggle please help!!
It looks like you've got a few errors going on here. Here's the answer:
// My Function() to myFunction()
function myFunction() {
// get_Element_By_Id to getElementById
var x = document.getElementById("mountain_bikes")
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
// get_Element_)By_Id to getElementById
document.getElementById("mountain_bikes").style.display = "none"
<!-- My Function() to myFunction() -->
<!-- on click to onclick —>
<!-- optionally add type="button" -->
<button type="button" onclick="myFunction()">Try it</button>
<!-- Added for demo -->
<div id="mountain_bikes">
My super cool mountain bikes.
</div>
As stated in a previous answer, it's just typos, but more than was mentioned. I'm sure you're still learning the basics, but this is something you should watch tutorials on, and maybe look at other people's code to get a better understanding of how JavaScript works. Your code works fine, without the typos, but this is something that's easily fixed by pasting the code into CodePen, or just running console.log() on your variables.
For future reference, you should also know about the preventDefault() function, that can be run on an event, like onClick. This is really only important in the case of forms, but if you run into other issues this may help. If you have a button in a form, but you don't want it to submit, make sure you include type="button" though. Here's how the preventDefault() function works:
// Setting constant variables since they never change.
// Using querySelector() for simplicity.
const article = document.querySelector('article'),
button = document.querySelector('button')
// Rather than using an onclick on the button in the HTML, I'm using an event listener to listen for the click event in JavaScript.
// This is the same thing as we had before, it just looks a little different.
button.addEventListener('click', (e) => { // Notice the e parameter. This is our event.
// This prevents the default behavior of our click event
e.preventDefault()
// This is the same as the if statement, just as a terny operator.
article.style.display === 'none'
?
article.style.display = 'block'
:
article.style.display = 'none'
})
// No need to set the style to none to start, since that's put in the HTML
<button type="submit">Click Me</button>
<!-- Here we set the display to none, so we don't have to do it in the JavaScript to start -->
<article style="display: none;">
<p>Without the preventDefault() function, the button would submit to the form—or at least try to, since there is no form—which would change the query in URL.</p>
<p>This could potentionally refresh the page, as is happening in your case.</p>
</article>
In your tag, the onclick needs to be one word, like this:
<button onclick="myFunction()">Try It</button>
Also, you shouldn't have spaces in your function names, I'm not a JS first guy, but I'm pretty sure no language allows for that (that I know of at least!)

How do I hide and show an html page in order to make a simple menu?

I'm trying to create a simple menu for an assignment, but I'm having trouble hiding the current menu page and show the one corresponding to the button clicked. How can i do that? I'm new to javascript.
I have a button handler to deal with the click of the button that brings the new page. I have tried disabling the nav where all the elements are but that doesn't seem to work.
function main() {
var ButtonSingle = document.getElementsId("UJOGADOR");
ButtonSingle.addEventListener("click", btnSingleHandler);
}
function btnSingleHandler(ev) {
var page = document.getElementsId("menu");
page.disabled = true;
}
html:
<body>
<main>
<nav id = "menu">
<button id="UJOGADOR"><img src="../resources/btn4.png"></button>
</nav>
</main>
<audio loop>
<source src="">
</audio>
</body>
What is meant to happen is the current menu page is hidden and a new one will appear, but when i run this nothing happens.
I see two things.
1) getElementsId is not a function. You probably meant getElementById
var ButtonSingle = document.getElementById("UJOGADOR");
2) If you are trying to hide an HTML element you can set its CSS properties to display: none. You can do this by dynamically changing the class, or using a function like you already trying to do.
function btnSingleHandler(ev){
var page = document.getElementById("menu");
page.style.display = "none";
}
Something like that should work, as long as you properly set up your event listeners to the button.
First of all, there's no function named getElementsId. You should use:
var page = document.getElementById("menu");
Showing and hiding elements in a document is a common task. To hide any element, you can give it a display:none style:
myElement.style.display = "none";
To show a hidden element, give it one of the visible styles:
myElement.style.display = "block";
myElement.style.display = "inline";
myElement.style.display = "inline-block";

Hiding a div container including php generated content with a script

I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!
I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!

The onclick is not working on first click

I am working on one JavaScript project, where I need to toggle between Celsius and Fahrenheit.
The HTML is here
<button onclick="toggleCF();" id="toggleCF" class="button">Toggle C/F</button>
And here is the JavaScript Function
this.toggleCF = function() {
console.log('click');
var fahrenheit = document.getElementById('toggleFahrenheit');
var celsius = document.getElementById('toggleCelsius');
if (fahrenheit.style.display === 'none') {
fahrenheit.style.display = 'block';
celsius.style.display = 'none';
} else {
fahrenheit.style.display = 'none';
celsius.style.display = 'block';
}
}
The CSS I used is given
.temperature-celsius {
}
.temperature-fahrenheit {
display: none;
}
If you want to check this application live here is the link
Please click on this link to see app in running form
If you visit the above link and check, you will find that on first click the toggle didn't work. But when you click the second time then it starts working normally.
When the app is first loaded, both the toggleFahrenheit and toggleCelsius divs have no style attribute. They are getting display rules from the CSS, true, but they have no style on themselves.
So think about what your code sees, then. fahrenheit.style.display is null because that block doesn't have the style attribute yet. Therefore, fahrenheit.style.display === 'none' evaluates to false. As a result, the else block is executed and you end up displaying Celsius. Unfortunately, this is the default block which is shown, so the first click doesn't do anything.
The second click works because after the code executes once, now both div blocks have a style attribute.
To fix this, you should either put default style attributes onto the div tags or flip the logic in the code so you check on the Celsius block first, since that's the default display.
Personally, I would use classes to toggle display behaviour instead.
function toggle() {
var fahrenheit = document.getElementById("fahrenheit");
var celsius = document.getElementById("celsius");
fahrenheit.classList.toggle('hide');
celsius.classList.toggle('hide');
}
.hide { display: none; }
<div id="fahrenheit" class="hide">-40 F</div>
<div id="celsius">-40 C</div>
<button onclick="toggle()">Toggle</button>
And yes, I use -40 degrees in the example because I'm lazy and I happen to know this is the same temperature in both systems (:
It does not work because this if (fahrenheit.style.display === 'none') will return NULL as there is no inline style on the element. this method won't "look" at CSS, it only works for inline styles. You could try this:
var element = document.getElementById('toggleFahrenheit'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
to check the CSS properties in pure JS or you could use JQuery which would solve it in one line of code.
This often happen most of the time on your css content not being been loaded up fully i have my issue solved with the following code:
function yourFunction() {
document.addEventListener("DOMContentLoaded", function(){
// you works start here
});
}
The simple solution is to use the EventListener .
I had the same problem with the onclick but when using :
const myEl = document.getElementById('myBtn');
myEl.addEventListener('click', function () {
//Your code here
});
It works on first click!

Hiding and showing dividers using javascript - Works in JSFiddle, doesn't work on site

I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/
is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.
I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.

Categories