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.
Related
I am a cybersecurity student trying to understand some basic HTML injections. I have been working on this code for a few days and can't understand what I am doing wrong. The code that I have currently does allow for injection, for example if I put <h1>test</h1> into the textbox, it will display test as a header. But if I try <script>alert(1)</script> it won't actually run the script. I have tried setting the value of the text box to "" or with the thought that I could close out that line by inputting the following into the textbox: "><script>alert(1)</script>
I've also tried to cancel out the remainder of the code by adding a comment to the end like this: <script>alert(1)</script><!--
I've tried a number of combinations of each with no luck. Now I actually need to be able to inject a script since I'm playing around with CSP and how that affects injection of scripts into the webpage. I currently DO NOT have a csp specified that would restrict the JavaScript from running. Some other things I've tried include using different browsers, changing browser security, and ensuring that JavaScript is enabled in the browser. Any help would be greatly appreciated!!
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
That's because <script>s run at page load, and, when the label's content change, the scripts have ran already.
However, if you inject <script> tags to a different page (through the backend (XSS means Cross-Site Scripting)), it does work.
Alternatively, to make it work in a scenario, where the content injected after page load (like your case), you can use JS events (like onclick) to run your code:
<div onclick="alert(1)">Click me!</div>
Or, to execute it without user interaction, you could use an <iframe>'s onload event:
<iframe onload="alert(1)" style="display:none"></iframe>
to execute javascript from your form, you can try:
<iframe src=javascript:alert(1)>
or
<img src=x onerror=alert(1)>
Also worth noting:
script elements inserted using innerHTML do not execute when they
are inserted.
To manually execute JavaScript, you may do the following
without editing your HTML file, add this to the Input field on your Browser.
<iframe onload="alert(1)" style="display:none"></iframe>
More information on why this works here
More on how you can perform actions like this here: developer.mozilla.org
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
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.
{include file="head.tpl" title="Combate"}
{include file="navBar.tpl" dir=$dir}
<table id="CombatLister">
</table>
Nombre: <input type="text" id="nombrePJ">
AC <input type="number" id="ACPJ">
Iniciativa <input type="number" id="Init">
<button id="añadirParty" onclick="addPJButt()">Añadir</button>
<script>
function addPJButt(){
var name=document.getElementById("nombrePJ").value;
var ac=document.getElementById("ACPJ").value;
var iniciativa=parseInt(document.getElementById("Init").value);
addPJ(name,ac,iniciativa);
}
function addPJ(nombre,ac,init){
var table=document.getElementById("CombatLister");
var row=table.insertRow(0);
var cellNombre=row.insertCell(0);
var cellInit=row.insertCell(1);
var cellAc=row.insertCell(2);
cellNombre.innerHTML=nombre;
cellInit.innerHtml=init;
cellAc.innerHtml=ac;
}
</script>
<script>
{$x=0}
{foreach $party as $pj}
addPJ({$pj.nombre},{$pj.ac},{$pj.init})
{/foreach}
</script>
I have a smarty template that using an array from another page, adds it to the "CombatLister" table. however, for some reason, the addPJ() Script does not run. Im just learning the ropes of Javascript, so maybe im skipping something, but so far, i've got no answers on why it does not work.
I tried to check if the addPJ() script was wrong, using the addPJButt(), but the script is working: When i put data on the input types up there, they add the name correctly.
I dont think its a problem of Smarty. checking the source code of the page its similar, writting this where i call $pj:
<script>
addPJ(Galahad,14,5);
</script>
PS: As an extra problem, but not so important, on the insertCell methods of addPJ only the first cell is added.
addPJ(Galahad,14,5); is looking for an undefined variable Galahad.
you need to quote it so it gets printed as javascript string
Try
addPJ('{$pj.nombre}',{$pj.ac},{$pj.init})
Note: I haven't worked with smarty in years and assume the quotes will be literals
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 need an image click to execute a js function. I have it working in my project, but I have other code to develop so I'm trying to use jsfiddle. But I can't get this simple code to work in jsfiddle. when I use jsfiddle and I click the image, nothing happens.
What am I missing in my efforts to use jsfiddle?
My HTML
<div>
<img id="additem" Title="Add Item" onclick="myfunc()" OnMouseOver="this.style.cursor='pointer';" OnMouseOut="this.style.cursor='default';" src="~/images/Sign_Add_Icon_32.png" />
</div>
My JS
function myfunc() {
alert("hello");
}
Remove onload in framework and extensions, set it to in head or in body.
DEMO
This works! But what was the problem?
You can't wait for the document to load in that case, because myfunc isn't defined before the Javascript is executed after the HTML loads.