Why the code innerHTML on javascript is not working? - javascript

there are HTML code and JavaScript code
<script>
function Stock_Listing() {
document.getElementById("stock_menu").innerHTML = "hi";
}
</script>
<ul id="stock_menu" onload="Stock_Listing()"></ul>
but there is nothing on my page.
could you plz tell me why is not working?
and also not working insertAdjacentHTML.
<script>
function Stock_Listing() {
document.getElementById("stock_menu").insertAdjacentHTML = ("afterbegin", "hi");
}
</script>
<ul id="stock_menu" onload="Stock_Listing()"></ul>

In your onLoad function, you are declaring a function but never calling it. You don't need that second function:
window.onload = function() {
document.getElementById("stock_menu").innerHTML = "hi";
}
<ul id="stock_menu"></ul>
Or at least, you need to call that second function:
window.onload = function() {
function Stock_Listing() {
document.getElementById("stock_menu").innerHTML = "hi";
}
Stock_Listing();
}
<ul id="stock_menu"></ul>
Both method works, I would prefer the first one since you don't really need the Stock_Listing function.

You're not calling the second function, Stock_Listing(), anywhere. You need to call it or take the get element.... line outside of it

Related

Trigger function only on "onclick"

Hello I need a function to run when an a tag is clicked. I am using the onclick="" but it seems that the function runs on page load, instead of waiting to run when the a tag is clicked on. How do I make it so the function only runs when the a tag is clicked?
Here is my code.
HTML:
<a class="req_btn" onclick="conversionOne()">text</a>
<script type='text/javascript'>
(function conversionOne() {
alert("something");
})();
</script>
Thanks!
You are invoking the function when the script loads using an IIFE. Instead of this:
(function conversionOne() {
alert("something");
})();
Do this:
function conversionOne() {
alert("something");
}
You are using a self-executing function.
Declare the function in the global scope without executing it.
function conversionOne() {
alert("something");
}
Doing this
(function(){
/** code **/
})();
Means the code will be executed imediatelly.
in your case you want to create a function so you need this :
function conversionOne() {
/** code **/
}
or
var conversionOne = function () {
/** code **/
}
(function conversionOne() {
alert("something");
})();
calling function like this will work onload
Change this to
function conversionOne() {
alert("something");
};
More info

JS: ReferenceError: function is not defined

When my HTML file is loaded, it automatically shows a "login window" (see the function draw_login). When I click on the generated button I get the following error:
ReferenceError: emit_login is not defined
window.onload = function() {
var socket = io();
draw_login ();
function emit_login() {
var login_name = document.getElementById("login_name").value;
var login_password = document.getElementById("login_password").value;
socket.emit('login', {
name:"",
pw:""
});
}
function draw_login() {
document.getElementById("status_bar").innerHTML =
'Name:<input type="text" id="login_name"></input><br>'+
'Password:<input type="password" id="login_password"></input><br>'+
'<button type="button" onclick="emit_login();">login</button>';
}
}
Has anyone an idea or some suggestions?
Thanks in advance!
As Daniel A. White said;
Move it outside of the onload function.
And as Amit said, if you want to learn about why you need to do this, you should read about scopes in JavaScript as this is what causes your error. The function emit_login is created inside of the anonymous function window.onload, which means that anything outside of window.onload will not have access to anything outside of this.
Please correct me if I said anything wrong here. Haven't used JS for quite some time.
It looks like you are receiving this error because you have the emit_login function being called from your click handler which does not share the same scope as the function being called in your onload.
https://jsfiddle.net/sL7e5cut/
function emit_login() {
var login_name = document.getElementById("login_name").value;
var login_password = document.getElementById("login_password").value;
alert('login', {
name:"",
pw:""
});
}
(function() {
draw_login ();
function draw_login() {
document.body.innerHTML =
'Name:<input type="text" id="login_name"></input><br>'+
'Password:<input type="password" id="login_password"></input><br>'+
'<button type="button" onclick="emit_login();">login</button>';
}
}())
try defining the emit_login function outside the onload handler, and everything should work fine.
Keeping things out of the global scope is a good thing, but when you combine it with inline eventlisteners, e.g onclick="emit_login()" it just doesn't work.
Instead of having an inline eventlistener, you can do something like this in draw_login:
function draw_login() {
document.getElementById("status_bar").innerHTML =
'Name:<input type="text" id="login_name"></input><br>'+
'Password:<input type="password" id="login_password"></input><br>'+
'<button type="button">login</button>';
document
.querySelector('#status_bar button')
.addEventListener('click', emit_login, false);
}
Update: The whole point being that using the onclick attribute is discouraged, and definitely not one of the good parts of javascript.

calling inline onclick method of javascript to anonymous not working

I have below code in my html file
<a onclick="getRestaurantTiming({{ $afternoonTiming[$j]->id}});">Hi</a>
I have anonymous function in restaurant.js file
var Restaurant = (function ($) {
function getRestaurantTiming(id) {
alert('hi');
}
})(jQuery)
I want to call anonymous function in onclick method. Something like
<a onclick="Restaurant.getRestaurantTiming({{$afternoonTiming[$j]->id}});">Hi</a>
Please help.
You should return this cause you not instantiate object by new. Also function inside getRestaurantTiming should be binded to this.
var Restaurant = (function($) {
function getRestaurantTiming(id) {
alert('hi');
}
this.getRestaurantTiming = getRestaurantTiming;
return this;
})(jQuery);
Restaurant.getRestaurantTiming(1);
Try use it without the curly brackets.

Calling a function from an html document will not generate an alert

Hi all thanks for taking a look.
I am trying to call a javascript function when I click on the update button.
Here is the javascript
var text2Array = function() {
// takes the value from the text area and loads it to the array variable.
alert("test");
}
and the html
<button id="update" onclick="text2Array()">Update</button>
if you would like to see all the code check out this jsfiddle
http://jsfiddle.net/runningman24/wAPNU/24/
I have tried to make the function global, no luck, I can get the alert to work from the html, but for some reason it won't call the function???
You have an error in the declaration of the pswdBld function in your JavaScript.
...
var pswdBld() = function() {
---^^---
...
This is causing a syntax error and avoiding the load of your JavaScript file.
See the corrected version.
Also, you may consider binding the event and not inlining it.
<button id="update">Update</button>
var on = function(e, types, fn) {
if (e.addEventListener) {
e.addEventListener(types, fn, false);
} else {
e.attachEvent('on' + types, fn);
}
};
on(document.getElementById("update"), "click", text2Array);​
See it live.
In your fiddle, in the drop-down in the top left, change "onLoad" to "no wrap (head)"
Then change
var text2Array = function()
var pswdBld() = function()
to
function text2Array()
function pswdBld()
and it will alert as expected.
You have a syntax error in the line below..
var pswdBld() = function
^--- Remove this
supposed to be
var pswdBld = function
Also make sure you are calling this script just at the end of the body tag..
Because you are using Function Expressions and not Function Declaration
var pwsdBld = function() // Function Expression
function pwsdBld() // Function Declaration
Check Fiddle

Create JavaScript array of function pointer, without calling it

I have the code below. I would like to have an array (buttons) with a single element pointing to the a function (closeFlag).
<script type="text/javascript">
var closeFlag = new function() {
alert('Clicked');
}
var buttons = {
'OK': closeFlag
}
</script>
However, when loading the page the alert immediately pops up. When the array is constructed, instead of using it as a pointer, JavaScript calls my function.
Why? What mistake, misconception do I have?
The new keyword, you will not need it.
<script type="text/javascript">
var closeFlag = function() {
alert('Clicked');
}
var buttons = {
'OK': closeFlag
}
</script>
What's happening in your code is that it's constructing the anonymous function then assigning the result of it (this) to closeFlag.

Categories