In the following HTML/Javascript snippet, I'm missing the function's brackets in the onclick statement (it should read: onclick="showMessage()").
How could I get the missing brackets highlighted
(a) in Notepad before I display the page.
(b) in my Browser JS console after I display the page?
If this is not possible besides inspection, is there another way I could identify this issue more easily?
<html>
<head>
<script>
function showMessage() {
document.getElementById("messageArea").innerHTML = "Hello World";
}
</script>
</head>
<body>
<input type="button" value="Show message" onclick="showMessage">
<div id="messageArea">---</div>
</body>
</html>
The problem is onclick takes any kind of javascript expression, function execution being one of them. For example:
<script>
var a = 10
</script>
<!--All are valid and don't throw any errors -->
<button onclick="a">Nothing happens</button>
<button onclick="a++">Increment</button>
<button onclick="alert(a)">Check value</button>
<button onclick="undefined">Surely Not?</button>
Executing functions like showMessage() is one of it's primary use. And technically it's not an error to have a showMessage without the () inside the onclick. showMesage is just function definition, If you were to type showMessage and press enter in your browser's console, it will simply return the function definition and won't throw any error. So IDEs don't underline it as an error because it's not an error.
I don't know of any tool that will look at html attributes for possible errors like this.
However, if you move all of your javascript code to a separate file, you can use a tool like eslint to check for common errors.
So in this case, instead of using the onclick attribute in your HTML, you'd use javascript to select the element and add an event listener.
Related
I am rendering a graph with a couple of input fields using a function in WordPress. The js file is definitely available to this section of the html because the graph is rendering. It is included through the enqueue_script function in wp. However, when I try to set the onclick function (updateChart()), I get an error saying my function isn't defined. Been at it for a while... Any ideas?
I have tried importing the script directl into the head above the tags I am trying to call it in.
ob_start();?>
<head>
<!–– All styling should take place below ––>
<!–– First div id must match the first argument of Chart Object in js file ––>
</head>
<body>
<div id='chartContainer' style='height: 300px; width: 100%;'></div>
<input type='number' id='voltage' placeholder='Voltage' step='0.01' />
<input type='number' id='amperage' placeholder='Amperage' step='0.01' />
<button id ='simulate' onclick= 'updateChart()' >Simulate</button>
</body>
<?php
$content = ob_get_clean();
echo($content);
}
The js code should get the input fields and update the chart using them.
The syntax in the line of code from which you're calling the function is correct.
<button id ='simulate' onclick= 'updateChart()' >Simulate</button>
When issues like these arise for me I usually add in some console.log() 's into the code to see what is actually executing.
Firstly, you say that the JS file is being called properly but just to make sure add in a console.log into the JS file and see if it shows in the console window.
Secondly, create a very simple function like..
function myFunction() {
console.log("Hello");
}
then call this function in your view like..
<button id ='simulate' onclick= 'myFunction()' >Simulate</button>
If 'Hello' appears in the console window then the issue is with the updateChart() function and not the implementation.
What I'm attempting to do is add an HTML button that will trigger as really simple javascript function.
Essentially onclick, I want to see if a field contains a value of 0.00 - if so remove that value. Or, if the field does not contain data, add in the value of 0.00 so it should alternate between those two values.
<html>
<head>
</head>
<body>
<button onclick="ReCalc">Re-Calculate Balance</button>
<script>
function ReCalc() {
var BalanceWriteOff = Xrm.Page.getAttribute("jucy_balancewriteoff").getValue();
if ((BalanceWriteOff) ==null)
Xrm.Page.getAttribute("balancewriteoff").setValue("0");
Xrm.Page.data.entity.save();
if ((BalanceWriteOff) =="0")
Xrm.Page.getAttribute("jucy_balancewriteoff").setValue(null);
Xrm.Page.data.entity.save();
return;
}
</script>
</body>
</html>
When I try to run this on the form where the HTML element has been placed. Nothing is happening. I've thrown in some break points at the var and both if statements and I'm not getting a break when I'm triggering the onclick event.
I'm kind of stumped here. If anyone has any insights for me that would be awesome
Oops! In your onclick attribute you forgot to invoke the method.
To fix this, simply change onclick="ReCalc" to onclick="ReCalc()".
Here's a code pen to show you it works now - https://codepen.io/trentrand/pen/Jyomgr
To access CRM form fields from an HTML web resource, add this script to the HTML:
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
and prepend "parent" to the Xrm.Page object:
parent.Xrm.Page.getAttribute("jucy_balancewriteoff").getValue();
I'm struggling a bit with joining jstl and jquery.
I have a Spring aplication which provides me with a list, for example cars:
[Kia, Audi, Fiat, Mazda, Opel]
I have an input field that if the user presses the button next to it, it adds this text in form of fancy tag, or whatever.
Furthermore I want to add all list elements in same form of this tag while the page loads.
But if I try I receive :
Uncaught ReferenceError: add_tag is not defined (anonymous function)
So I have code as follows (of course strip down to very problem)
<script>
$(document).ready(function() {
function add_tag(value) {
console.log("adding tag:" + value);
//some styling
$("#add_here").append(value);
};
$("#add_tag").click(function() {
add_tag($("#choosen_tag").val());
});
});
</script>
<div>
<c:forEach items="${cars}" var="c">
<script>
add_tag("${c}");
</script>
</c:forEach>
</div>
<input id="choosen_tag"></input>
<button type="button" class="btn btn-default" id="add_tag">+</button>
<div id="add_here"></div>
All jquery, jstl tags etc, are of course included. The sole issue here is calling this function. Tried something with named functions, or declaring it within some other var, still no success :/
Minutes after posting, I found a solution. Script should use jstl instead of the other way around. Adding
<script> $(document).ready(function() {
<c:forEach items="${cars}" var="c">
add_tag("${c}");
</c:forEach>
// rest of script adding functions
...
solves my issue.
I've tried to change the onclick function through a bookmarklet in the url using this code:
javascript: document.getElementById('Button1').onclick = function(){alert('foo')};void(0);
I can change the value of the button but just not the onclick function. Is it even possible?
Thanks ^^
Some notes: I've also tried putting the code in a .js file and creating an external .js file using createElementId but it still does not seem to work :/
You were missing the trailing semi-colon to terminate the alert call. It's easier to spot once you indent it:
document.getElementById('Button1').onclick = function() {
alert('foo');
};
This code works. So the only option is that Button1 is not an ID of an element on that page.
For example:
<div id="Button1">Button</div>
If an element on the page looks like that, you will get your alert ('foo');
Your code seems to work...
Try to insert this code into the w3schools jseditor http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
<html>
<body>
<button type="button" id="Button1" onclick="alert('Some action');">Action!!</button>
<button type="button" id="Button2" onclick="document.getElementById('Button1').onclick = function(){alert('another action')};">Change onclick</button>
</body>
</html>
When I click on the button, the first time, everything works fine, but the second time, nothing happens. Why is that?
<form name="alert"><input type="text" name="hour"><input type="text" name="min"><input type="button" value="ok" onclick="budilnik(this.form)">
<script type="text/javascript">
function budilnik(form)
{
budilnik=1;
min=form.min.value;
hour=form.hour.value;
alert (min+' '+hour+' '+budilnik);
}
</script>
Learn to use Firebug. It'll help you immensely in the future.
budilnik=1;
This may sound crazy, but this is redefining the function budilnik to an integer, which breaks your form's onlick. If you preface this statement with keyword var, you will shadow the function but not overwrite it. When you do not specify the var keyword, variables are assumed to be global scope, which can cause issues (like this).
I used firebug to see that on the second click, "budilnik is not defined." If you had used this tool, you could have probably debugged this issue yourself.
The variable budilnik is shadowing the function budilnik. Change the name of the variable, and your function should work right every time.
In more detail:
First, JavaScript sees budilink defined as a function. When budilnik is executed, the value of budilnik is overwritten with the integer 1. So the next time JavaScript is told to execute budilink, it tries to execute 1, instead of the function that was there before.
Put the var keyword before your variable name.
I've tested the following code and it just works:
<form name="alert">
<input type="text" name="hour">
<input type="text" name="min">
<input type="button" value="ok" onclick="budilnik(this.form);">
<script type="text/javascript">
function budilnik(form)
{
var budilnik=1;
var min=form.min.value;
var hour=form.hour.value;
alert (min+' '+hour+' '+budilnik);
}
</script>
Change budilnik=1; to i_budilnik=1 or some other variable name .. by specifying budilnik=1; you are changing the definition from a function to a int val.
Alternatively you could try var budilnik=1; but not sure if that solves.