I'm new to JS, I watched some crash course on YouTube and try to do it on the same time. I'm using Visual Studio Code with an extension live server in order to see changes quickly.
In my JS code:
//SUBSCRIBE
var subscribeEmail = document.getElementById('subscribe-email');
var subscribeSubmit = document.getElementById('subsribe-link-btn');
//HEADER
var headerRootWrapper = document.getElementById("navbar-wrapper");
console.log(headerRootWrapper);
var show = document.getElementById('sidebar-wrapper');
//LOGO
var webLogo = document.getElementById('logo');
console.log(webLogo);
//MENU BAR
var menuBar = document.getElementById('menu-bar').addEventListener('click', menuSlideLeft());
console.log(menuBar);
var sideMenuId = document.getElementById('sidebar-wrapper');
//SEARCH BAR
var searchBar = document.getElementById('searchBarShow').addEventListener('click',searchStart());
// METHOD
function menuSlideLeft() {
alert("Fire");
}
From my Html file, I added the js script at the bottom (not inside the body tag) . It always execute the method menuSlideLeft() at the start without making me click the menuBar.
<script src="js/jscript.js"></script>
Remove the parentheses from your event listener, that calls the function. Instead use:
.addEventListener('click', menuSlideLeft);
You are calling function in this line
var menuBar = document.getElementById('menu-bar').addEventListener('click', menuSlideLeft());
check the part menuSlideLeft() in addEventListener function.
What you should do is
var menuBar = document.getElementById('menu-bar').addEventListener('click', menuSlideLeft);
i-e just pass the reference of the function. Don't call it. it will be called in that event
You are calling function instead of passing it as parameter.
Solution:
document.getElementById('menu-bar').addEventListener('click', menuSlideLeft);
Related
Using google apps script I'm having trouble running a js function which passes parameters. When I add the parameters it will always run the code when the page loads instead of when the button is clicked.
Direct from the HtmlService example, it is OK - it runs when the button is pressed...
document.getElementById('button1').onclick = doSomething;
But when I add a parameter to the call (and function) as below, it runs just once when the page loads (and not when the button is pressed)...
document.getElementById('button1').onclick = doSomething('with_this_parameter');
Any insight into this behaviour would be greatly appreciated... sorry if the answer is obvious!
When you say
document.getElementById('button1').onclick = doSomething('with_this_parameter');
This means call doSomething('with_this_parameter') and then assign the returned value to document.getElementById('button1').onclick. Hence that is why it gets called when code reaches that line. Whether the value is assignable to that property or not is another question, but that is why it gets called.
Use it like this
document.getElementById('button1').onclick = function(){
doSomething('with_this_parameter');
}
Reference: This solution was given by Mark Linus.
Do like this:
document.getElementById('button1').onclick = function(){
doSomething('with_this_parameter');
}
To assign a reference of function to some variable, you do:
var a = doSomething;
where doSomething is a function.
But when you have to pass parameters and assign that function
var a = doSomething(b);
this will cause trouble as while assigning the function to the variable, it gets called and not when it is intended to be called.
To overcome this, you can use arrow functions or simple function to call your own function with params.
var c = () => doSomething(d);
This actually is understood as var c = anonymous_function;
or
var c = function() {
doSomething(d);
}
Hence you can do:
document.getElementById('button1').onclick = () => doSomething('with_this_parameter');
I usually do clickHandlers like so:
// create button here or get button...
var button1 = document.getElementById('button1').setName('button1');
var clickHandler = app.createServerClickHandler('doSomething');
button.addClickHandler(clickHandler);
function doSomething(e){
var button1 = e.parameter.button1;
<do something with var button>
}
I'm not sure what parameter you are adding, but you need to add a callback element to pass it if it isn't passed by the button itself via a .setId/getId or .setTag/getTag. If it is from a textbox:
var textbox = app.createTextBox();
var button1 =
app.createButton.setName('button1');
var clickHandler =
app.createServerClickHandler('doSomething').addCallbackElement(textBox);
button1.addClickHandler(clickHandler);
Hope this helps!
Can someone explain why one of these versions of code works and the other fails?
This doesn't work:
var classForSelectedElement = "hightlight";
var prevSelect = $(".form-element");
var $selectedElement = $("div").on("click", ".form-element",function(e){
prevSelect.removeClass(classForSelectedElement);
$(this).addClass(classForSelectedElement);
});
Whereas this works:
var classForSelectedElement = "hightlight";
var $selectedElement = $("div").on("click", ".form-element",function(e){
$(".form-element").removeClass(classForSelectedElement);
$(this).addClass(classForSelectedElement);
});
Why?
Presuming that the .form-element elements are appended to the DOM dynamically after load (due to your usage of a delegated event handler) then the first example doesn't work as you are attempting to retrieve the .form-element on load of the page before they exist.
There is probably a really easy solution to this but I cannot for the life of me work out how to fix this issue, and nothing I have found so far has done the trick.
I'm trying to get the function "validate" to run when the form "apply" is submitted:
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
applyForm.onsubmit = validate;
}
Validate looks like the following:
function validate() {
alert("If this alert is up then validate is running");
var dateOfBirth = document.getElementById("dob").value;
var state = document.getElementById("state").value;
var postcode = document.getElementById("postcode").value;
etc.
The function "setJobValue" is running (so I know init is working) and there are no errors in the console, but what adjustments would I have to make for validate to be called?
Well, what happens is that when you put your code above in the head, the script runs when the HTML gets rendered. So during that time, it allocates different memory and function blocks. So when you call that function again, then it gives you different results and no errors because of the existing references. Well its a bit weird but its the way JS works and it is always recommended to put your JS code at the bottom of the page.
You can directly call validate method from your init method instead.
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
validate();
}
When we assign a function to an event, it will fire at last.
so in your case, This should work
function init() {
var applyForm = document.getElementById("apply");
setJobValue();
applyForm.onsubmit = functionToSave;
}
And call your validation method on the submit button onclick event.
I have created button in C# dynamically and added client side event
but that function not getting called instead getting error as:
Uncaught ReferenceError: setPropertyLocation is not defined
Javascript:
function setPropertyLocation() {
alert('Hello');
}
C#:
btnMap.Attributes.Add("type", "button");
btnMap.Attributes.Add("title", "Map");
btnMap.UseSubmitBehavior = false;
btnMap.OnClientClick = "setPropertyLocation();return false";
btnMap.ID = "btnMap" + objPMPropTypestructure.PMFields[fieldcnt].SystemName;
btnMap.CssClass = "dataButton";
btnMap.Text = "G";
btnMap.Enabled = true;
tablecell.Controls.Add(btnMap);
//Try to use this.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById ("btnMap").addEventListener ("click", setPropertyLocation, false);
});
Consider creating this button via JavaScript instead of C#. I assume you are using an update panel. Update panels are a mess. They don't update the DOM elements, they just get rid of the old wrapper and create an entire new, what sets to undefined all JavaScript references to any element in that wrapper.
Well, some times we don't have time to refactor the solution, so we must work with what we have.
You may try add an onclick attribute to the element, just like you did for type and title attribtues.
I am not an expert JavaScript user and I am having difficulty with addEventListener.
var appcontent = document.getElementById("appcontent");
appcontent.addEventListener("DOMContentLoaded", load, true);
function load(aEvent) {
var doc = aEvent.originalTarget;
alert(doc.location.host);
}
In an add-on this code will alert the location.host of the appcontent. My problem is that I don't need an event listener and want to call load like a normal function:
var appcontent = document.getElementById("appcontent");
load(appcontent);
function load(aEvent) {
var doc = aEvent.originalTarget;
alert(doc.location.host);
}
This is what I was trying to do but it doesn't work.
Your load() function still expects an event but you are now passing the actual element to it. Also, which location do you want to know, that of the currently selected tab? Then you can use the global content variable, it is pointing to the window object of the current tab. So changing the load() function into something like this should work:
function load() {
alert(content.location.host);
}
Use Ctrl+Shift+J to open JavaScript Console and to check the errors for your extension - it should help you find our what the issue is.