Disappearing Javascript onClick Box, New to JS - javascript

So I created a page that was supposed to have a box open up onClick. While this worked in a vacuum, when I upload it to the page it seems like when I use the button, it will initially show the content, then, it "reloads" the page, and then hides the content again.
The snippet of Javascript I used was:`
<script>
function showVet() {
var x = document.getElementById('vetinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showSust() {
var x = document.getElementById('sustinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function showGuarantee() {
var x = document.getElementById('guaranteeinfo');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>`
Then in the HTML referenced if like this (just one of the sections):
<div class="section feature bt10">
<h3>Holistic Veterinarian<br>Approved</h3>
<button class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>
</div>
You can view the page here:
https://www.onlynaturalpet.com/CompanyInfo/about-us-our-honest-promise.aspx
I'm pretty new to javascript, so I might have just messed something up. When I tested the page in local environment it was fine,I'm not sure where I went wrong!

The default type of a button is "submit". The button which calls showVet in the click attribute is inside a form, so it submits the form which reloads the page.
Submission can be prevented by changing the button (in line 692 of the linked page) type to "button":
<button type="button" class="HPbutton hidden-sm" onclick="showVet()">Learn More</button>
which does not submit a form it may be in.

Related

onclick button only one div id is in call action

I have created button that view the elements that is hidden onclick but there are many div with same id but it i want to hide all but its hidding only one i am using below code but its just viewing or hidding, the first div only hidding onclick rest its not hidding
<button onclick="myFunction()" class="btn-custom">View the Picture</button>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<div id=hide></div>
<script>
function myFunction() {
var x = document.getElementById("hide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Your HTML is invalid - ids must be unique.
Instead, use a class to identify the elements and querySelectorAll to select all of them:
<div class=hide>a</div>
<div class=hide>b</div>
<div class=hide>c</div>
<div class=hide>d</div>
<button onclick="myFunction()">Toggle</button>
<script>
function myFunction() {
var x = document.querySelectorAll(".hide");
x.forEach(y => {
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
})
}
</script>

I have several functions that do the same thing. How do I put it all in one function?

document.getElementById("isfine").addEventListener('click', showMe);
function showMe(e){
let x = document.getElementById('crying')
if(x.style.display == 'none'){
x.style.display = 'block'
} else{
x.style.display = 'none';
}
e.preventDefault();
}
document.getElementById("mine").addEventListener('click', showMe2);
function showMe2(e){
let x = document.getElementById('heroes')
if(x.style.display == 'none'){
x.style.display = 'block'
} else{
x.style.display = 'none';
}
e.preventDefault();
}
I tried passing arguments into my function, but then I did not know what to do with the expressions that are not in the functions.
You can use the function showMe and pass in the id of the target element you wish to target - this would refactor the use of creating new functions for the same functionality
such that
function showMe(e, target) {
// find target
}
document.getElementById("isfine").addEventListener('click', e => showMe(e, "crying"));
document.getElementById("mine").addEventListener('click', e => showMe(e, "heroes"));
function showMe(e, target) {
let x = document.getElementById(target);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
e.preventDefault();
}
<button id="isfine">isfine</button>
<button id="mine">mine</button>
<div id="crying">crying</div>
<div id="heroes">heroes</div>
Whenever you try to get things DRY, focus on identifying only what differs between logic blocks. You then replace the constants with variables which values are provided through function arguments.
e.g.
initToggler('trigger1', 'trigger1Content');
initToggler('trigger2', 'trigger2Content');
function initToggler(triggerId, contentId) {
const contentEl = document.getElementById(contentId);
document.getElementById(triggerId).addEventListener('click', togglerFor(contentEl));
}
function togglerFor(el) {
return () => el.style.display = el.style.display === 'none'? 'block' : 'none';
}
<button id="trigger1">Toggle Content 1</button>
<button id="trigger2">Toggle Content 2</button>
<div id="trigger1Content">trigger1 content</div>
<div id="trigger2Content">trigger2 content</div>
Here we've made progress by eliminating some duplicate logic, but we could do more. HTML tells you a lot about the document's structure, but it can also tell you about it's behaviors by using declarative markup. At first glance it may seem like a lot of extra code, but we've now extended the HTML with a new data-toggle attribute and the HTML became a little more behavior-telling.
e.g.
initTogglers();
function initTogglers() {
Array.from(document.body.querySelectorAll('[data-toggle]')).forEach(el => {
initToggler(el, el.dataset.toggle);
});
}
function initToggler(triggerEl, contentId) {
const contentEl = document.getElementById(contentId);
triggerEl.addEventListener('click', togglerFor(contentEl));
}
function togglerFor(el) {
return () => el.style.display = el.style.display === 'none'? 'block' : 'none';
}
<button data-toggle="content1">Toggle Content 1</button>
<button data-toggle="content2">Toggle Content 2</button>
<div id="content1">trigger1 content</div>
<div id="content2">trigger2 content</div>
If you continue down that path, you'll eventually arrive to the concept of domain-specific HTML where you'd have your own elements and attributes. That's basically how most web UIs are built these days, using reusable components, most often on the foundation of various librairies such as React or Angular.
I'm fully aware my answer goes way beyond the question, but I thought it would be a good learning opportunity and that's still all very related to avoiding code duplication.

How to show/hide a div in javascript?

When i click the button i want the div to show, and when i click the button again i want it to disappear. What am i doing wrong?
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">
Glow
</div>
<script>
function myFunction() {
var e = document.getElementById("Dglow").style.display;
if (e == "none")
e = "block";
else {
e = "none";
}
}
You should compare and change element's display property:
function myFunction() {
var e = document.getElementById("Dglow").style;
if (e.display == "none") {
e.display = "block";
} else {
e.display = "none";
}
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">Glow</div>
Actually document.getElementById("Dglow").style.display returns a string and according to Left hand assignment rule you cannot store anything to that string, since that string is not a variable/object now ie not a reference to DOM anymore
You can do is
var e = document.getElementById("Dglow").style;
if(e.display == "none")
e.display = "block";
else{
e.display = "none";
}
Have you considered using Jquery? If so heres what you need.
$(document).ready(function(){
$("#button").click(function(){
$("#Dglow").toggle();
});
});
You would need to give your button an id for this though.

Hide one form when other button is clicked on (two buttons, two forms) (PHP/HTML/Javascript)

I currently have two buttons, each displays a different form. I also have the buttons so that when you click on it once, it'll show the form, and if you click on it again, it'll hide the form.
WHAT I WANT IT TO DO:
I'm trying to get it so that if one form is already shown and I click on the button for the OTHER form, the one that is currently showing will hide and the OTHER one will show.
Here's what I thought would work, but if one of the form is shown and I click on the button for the other form, nothing happens.
<script>
function show(x, y){
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display == "block";
document.getElementById(y).style.display == "none";
}
else if(document.getElementById(x).style.display == "none") {
document.getElementById(x).style.display = "block";
}
else{
document.getElementById(x).style.display = "none";
}
}
</script>
<form>
<button type = "button" onclick = 'show("searchForm", "insertForm");'>Perform Search</button>
<button type = "button" onclick = 'show("insertForm", "searchForm");'>Insert Data</button>
</form>
<form id = "searchForm" value "search" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
<form id = "insertForm" style = "display: none;" action = "test2.php" method = "post">
<!-- My code -->
</form>
I'm sure it's some really silly mistake I'm making. Can anyone help me figure this out and explain what I'm doing wrong and what I should be doing instead? Thanks!
You are doing comparisons == in your if, and need to use an assignment =
if(document.getElementById(x).style.display == "none" && document.getElementById(y).style.display != "none"){
document.getElementById(x).style.display = "block";
^
document.getElementById(y).style.display = "none";
^
}
It is a pretty small mistake..
document.getElementById(x).style.display = "block";
document.getElementById(y).style.display = "none";
You are using equals operator instead of the assignment operator.
No matter what you want to use, try to touch DOM as few times as possible.
function show(x, y){
var x, y; // function scope vars
// search for elements just once
x = document.getElementById(x);
y = document.getElementById(y);
console.log(x);
console.log(y); // just to show if you are getting elems you really want
if(x.style.display == "none" && y.style.display != "none"){
x.style.display = "block";
y.style.display = "none";
}
else if(x.style.display == "none") {
x.style.display = "block";
}
else{
x.style.display = "none";
}
}

How to hide a div if the form state is invalid

Can anyone suggest me how to hide a div if the form state is invalid??
Actually my requirement is like this:-
I need to display some success bar while page loading & then I want to hide this div if the form state is invalid when the user clicks on submit button.I have tried this, which worked previously but somehow our UI is changed. So, when i try to integrate this code with new UI, its not working.
<div class="addUser_success">
</div>
<button class="addUser_button" type="submit" onclick="hideDiv()"></button>
Script Code:-
function hideDiv()
{
if (document.getElementById) {
document.getElementById('addUser_success').style.display = 'none';
}
Also i used Jquery, but doesn't work at all
My Jquery code:-
$(document).ready(function ()
{
$(".addUser_button").click(function ()
{
alert("hai1");
$(".addUser_success").hide();
});
});
Any code snippets please????
I think it's
div.style.display = 'none';
and
div.style.display = 'block';
Try this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

Categories