add1 does not exist in DOM How to Add? - javascript

I am having an issue with java-script and an HTML form.
I have a form and next to the form is a button called "add" when I click add the second form appears. Next to form 2 is another button called add1, when I click this button I am wanting the third form to display. For some reason only the first add button is working.
Below is the code I have so far:
<style type="text/css">
#newservicesetup1, #newservicesetup2 {
display:none;
}
</style>
<script type="text/javascript">
function showform(theform) {
var showHides = new Array('newservicesetup1','newservicesetup2');
for (i=0;i<showHides.length;i++) {
document.getElementById(showHides[i]).style.display=
(document.getElementById(showHides[i]).id == theform) ? 'block' : 'none';
}
}
function loadBehaviors () {
if (document.getElementById) {
document.getElementById('add').onclick = function() { showform('newservicesetup1'); }
document.getElementById('add1').onclick = function() { showform('newservicesetup2'); }
}
}
window.onload = loadBehaviors;
</script>

Try adding a semicolon to the end of the assignments:
function loadBehaviors () {
if (document.getElementById) {
document.getElementById('add').onclick = function() { showform('newservicesetup1'); };
document.getElementById('add1').onclick = function() { showform('newservicesetup2'); };
}
}
You can check your Javascript for syntax using Online Javascript Lint.

why not just
document.getElementById('add').onclick = function() {
document.getElementById('newservicesetup1').style.display = 'block';
}
document.getElementById('add1').onclick = function() {
document.getElementById('newservicesetup1').style.display = 'block';
}
that will show the correct forms when you click the appropriate button. if you want them to disappear when clicking again, you will only need a slight modification

When loadBehaviors() is called, add1 does not exist in the DOM yet. Bind to the event handler after you add it to the DOM.

Related

Is there a way to add a function to my current button?

I am using JS and HTML. I have a button that displays the next section of html, but I wanted to add an additional function.
// Display Thanks Message
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById("btn").addEventListener("click", addPerson function() {
q5.style.display = "none";
end.style.display = "block";}
});
In this addPerson is the function I am trying to include. In this current code I keep getting syntax errors.
Call addPerson() inside the function.
// Display Thanks Message
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("btn").addEventListener("click", function() {
addPerson();
q5.style.display = "none";
end.style.display = "block";
}
});
});

How can I disable window.onbeforeunload using jQuery class click function?

I want to make a button that toggles a new class when it's clicked, then when that new class is clicked, it sets goAway to true. Here's what I'm using, does anyone notice something that would prevent this? It works in all other onclick functions that have the line: goAway = true;
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
goAway = true;
});
});
I have also tried this below, but neither seem to work...
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
window.onbeforeunload = null;
});
});
You can try either one of this.
First one:
$(window).unbind('onbeforeunload');
Second one:
window.onbeforeunload = false;
I hope this works for you.
Update:
I noticed you placed onbeforeunload function inside click function.
Once try by placing this function out side of click function.
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
Finally! I figured it out. Attached a JavaScript onClick event to the element set to toggle with jQuery ;)
The html button:
<button onclick="removeWarning()">This is the button</button>
Then the rest:
<script>
var goAway = false;
$("button").click(function(){
$(this).toggleClass('MyNewClass');
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
function removeWarning(){
if ($("button").hasClass('MyNewClass')){
goAway = true;
}
}
</script>

Toggle Event Listeners

I am trying to make a function that would allow me to toggle eventListener of an element.
In the example below, I have three buttons: main, on and off. When I click on the on button, the main button becomes functional. After I click off button, the main button should not work anymore (but now it still does).
Now I can achieve a desired behavior by clicking on button for the second time, but I guess it's a bad coincidence and it's not supposed to work that way.
Maybe I should add that I would like to work this out without using jQuery or similar and it needs to be a function, because I am going to use it for a lot of buttons.
(I suspect something with scope causes the problem (clickHandler when calling the function to activate the button is not the same as the clickHandler when calling the function to disable the button), but I can't think of a way to test it.)
// buttons definitions, not important
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButton = document.querySelector("#offButton");
// main function
var toggleButtons = function(toggleVal, button, element) {
var activateButton, clickHandler, disableButton;
// callback function for listener bellow
clickHandler = function() {
document.querySelector(element).classList.toggle("yellow");
};
activateButton = function() {
button.addEventListener("click", clickHandler);
};
disableButton = function() {
button.removeEventListener("click", clickHandler);
};
// when first argument is 1, make the button functional, otherwise disable its functionality
if (toggleVal === 1) {
activateButton();
} else {
disableButton();
}
};
// when onButton is clicked, call main function with arguments
// this works
onButton.addEventListener("click", function() {
toggleButtons(1, mainButton, "body");
});
// this fails to disable the button
offButton.addEventListener("click", function() {
toggleButtons(0, mainButton);
});
.yellow {
background-color: yellow;
}
<button type="button" id="mainButton">mainButton
</button>
<button type="button" id="onButton">onButton
</button>
<button type="button" id="offButton">offButton
</button>
<p>mainButton: toggles background color on click
</p>
<p>onButton: turns on mainButtons's functionality</p>
<p>offButton: supposed to turn off mainButton's functionality</p>
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButon = document.querySelector("#offButton");
var element; // declare the element here and change it from toggleButtons when needed.
function clickHandler() {
document.querySelector(element).classList.toggle('yellow');
}
function activateButton(button) { // You missed this part
button.addEventListener('click', clickHandler);
}
function disableButton(button) { // You missed this part
button.removeEventListener('click', clickHandler);
}
function toggleButtons(value, button) {
if (value === 1) {
activateButton(button); // You missed this part
} else {
disableButton(button); // You missed this part
}
};
onButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(1, mainButton);
});
offButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(0, mainButton);
});
Below code helps to toggle between two functions from an eventListener:
var playmusic=false;
function playSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.currentTime = 0
audio.play()
playmusic=true;
}
function stopSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.pause()
playmusic=false;
}
window.addEventListener('keydown',
function(){playmusic?stopSound():playSound()} )

JQuery call popup

I am an Apprentice and never worked with Javascript.
My Javascript function calls a popup. This works on the first button but doesn't work on all the following and since the application is constantly adding buttons(same class) I cannot hardcode. I guess ther will be a solution with JQuery...
("open") and ("openPopupUseExisting") are the two buttons.
<script type="text/javascript">
window.onload = function () {
document.getElementById('blackout').addEventListener('click', function () {
document.getElementById('popup').className = "";
document.getElementById('blackout').className = "";
document.getElementById('popupUseExisting').className = "";
}, false);
document.getElementsByClassName("open")[0].addEventListener('click', function () {
document.getElementById('popup').className = 'visable';
document.getElementById('blackout').className = 'visable';
}, false);
document.getElementsByClassName("openPopupUseExisting")[0].addEventListener('click', function () {
document.getElementById('popupUseExisting').className = 'visable';
document.getElementById('blackout').className = 'visable';
}, false);
document.getElementsByClassName("close")[0].addEventListener('click', function () {
document.getElementById('popup').className = "";
document.getElementById('blackout').className = "";
document.getElementById('popupUseExisting').className = "";
}, false);
};
</script>
document.getElementsByClassName("close")[0]
See that 0?
getElementsByClassName returns an array-like object. You are getting the first item off it.
Loop over it with a for loop.
Friend, you don't need to add an entire library just in order to bind dynamically added elements.
You can bind the document for click event, and then check if the clicked element is the one you want. It prevent dynamically added elements to be unbound, since it aims for the entire document.
document.addEventListener('click', function (e) {
if (e.target.classList.contains('blackout')) {
// your fancy magic with .blackout
} else if (e.target.classList.contains('open')) {
// your fancy magic with .open
}
}, false);
If you really want to use jQuery, as you ordered, it's quite simple, use the on method
$('.open').on('click', function(){
// your fancy magic with .open
});

Page resets after javascript function finishes

I'm doing a simple html page for a project.
I have a submission form.I use jquery to validate it (no sure if i'm doing ir right).
After the submission is validated,i want to save the user's details(name,password),in an array. The array is created when the script loads.
I added the function SubmitUser() to the onclick event,but when the function finishes,and adds the user,the page resets,and the variables are reset.
I wonder if someone could point out to me what i'm doing wrong.
Thanks in advance,
Boris
Here's the script code:
var userArray = new Array();
var passArray = new Array();
var userNumber = 0;
//Adding rules for validation
$(document).ready(function(){
$("#registerForm").validate({
rules: {
password: {
required: true,
minlength: 8
}
}
});
});
//Add a method to validate
$(document).ready(function(){
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-zA-Z]+$/i.test(value);
}, "Field must contain only letters");
});
//The function in question
function SubmitUser()
{
if($("#registerForm").valid())
{
var user = document.getElementById('username');
userArray[userNumber] = user;
userNumber++;
alert('Registered');
}
//Function to switch between the different pages in the menu.
function toggle(id) {
if(id=='LoginPage')
{
document.getElementById(id).style.display = 'block';
document.getElementById('WelcomePage').style.display = 'none';
document.getElementById('RegisterPage').style.display = 'none';
document.getElementById('GamePage').style.display = 'none';
}
if(id=='WelcomePage')
{
document.getElementById(id).style.display = 'block';
document.getElementById('LoginPage').style.display = 'none';
document.getElementById('RegisterPage').style.display = 'none';
document.getElementById('GamePage').style.display = 'none';
}
if(id=='RegisterPage')
{
document.getElementById(id).style.display = 'block';
document.getElementById('WelcomePage').style.display = 'none';
document.getElementById('LoginPage').style.display = 'none';
document.getElementById('GamePage').style.display = 'none';
}
if(id=='GamePage')
{
document.getElementById(id).style.display = 'block';
document.getElementById('WelcomePage').style.display = 'none';
document.getElementById('RegisterPage').style.display = 'none';
document.getElementById('LoginPage').style.display = 'none';
}
return false;
}
If you're looking to override the form's natural submit behavior, you can do this:
$(document).ready( function(){
$('#registerForm').submit( function(e){
e.preventDefault(); // suppress natural submit behavior
submitUser(); // your function
});
});
And since you're already using jQuery, you can greatly simplify your toggle code. For each block like this:
if(id=='WelcomePage')
{
document.getElementById(id).style.display = 'block';
document.getElementById('LoginPage').style.display = 'none';
document.getElementById('RegisterPage').style.display = 'none';
document.getElementById('GamePage').style.display = 'none';
}
...you can instead do this:
if( id === 'WelcomePage' ){
$('#'+id).show();
$('#LoginPage, #RegisterPage, #GamePage').hide();
}
Or even more generally, handle all your toggling cases with one line:
function toggle(id){
$('#LoginPage, #RegisterPage, #GamePage, #WelcomePage')
.hide()
.filter('#'+id).show();
}
You can try adding this to your onclick event (on your 'submit' button):
onclick="javascript:return SubmitFunction();"
OR in your form tag (For normal submit button):
onSubmit="javascript:return SubmitFunction();"
Make sure you are returning true or false in your function. if false is returned page won't reset/refresh.
When the page refreshes or changes, the JavaScript variables are reset... Thats the unfortunate truth. Make sure the function that the form is on returns false to stop it from changing the page - so SubmitUser() should look like:
function SubmitUser()
{
if($("#registerForm").valid())
{
var user = document.getElementById('username');
userArray[userNumber] = user;
userNumber++;
alert('Registered');
}
return false;
}
Now, to change pages look at using jQuery.html (Link) to load content in without actually changing the page (or jQuery.load (Link) to load an actual file, like games.html):

Categories

Resources