As of now, I am making a simple no internet dinosaur game that everyone is familiar with using HTML, JS and CSS. I have been working my way through it and I have gotten everything working for the past few hours. All of a sudden, my buttons weren't working giving me the error: Uncaught ReferenceError: start is not defined at HTMLButtonElement.onclick
I tried changing the functions of the buttons and the IDs but none of it worked. My conclusion is that my script.js file isn't loading with the HTML file for whatever reason but the .css file is. The following code is the HTML.
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
<div>
<button class="btn btn-secondary" id="button" onclick="start()">Start</button>
<button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
</div>
</body>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</html>
The code below is the code for either function.
function start() {
document.getElementById("button").innerHTML = 'Jump'
button.setAttribute( "onclick", "jump()")
block.classList.add("movement")
}
function pause() {
pauseStatus = true
}
I don't know what the problem might be. I haven't made any changes to the file paths or anything and I can't think of how to fix the problem. I've tried putting the src path both in the body and outside of the body in the HTML and it hasn't worked.
You should try moving your script tag inside your body.
<div id="game">
<div id="character"></div>
<div id="block"></div>
</div>
<div>
<button class="btn btn-secondary" id="button" onclick="start()">Start</button>
<button class="btn btn-secondary" id="button2" onclick="pause()">Pause</button>
</div>
<p id="paused"></p>
<p id="score"></p>
<script src="script.js"></script>
</body>
</html>
Javascript
You should also be mindful that lines of Javascript should terminate with a semicolan.
function start() {
document.getElementById("button").innerHTML = 'Jump';
button.setAttribute( "onclick", "jump()");
block.classList.add("movement");
}
function pause() {
pauseStatus = true;
}
It would also be wise to take note of Sebastians suggestion and use addeventlistener for event handling.
button.addEventListener("click", jump);
Related
I want to adapt this HTML code for the calibration of this webgazer for eye tracking for my Blazor Server App. But when starting the app, the $(document).ready(function() - that should be called from calibration.js - won't start.
The razor component, where I want to implement it, looks like this:
#page "/Calibration"
#inject IJSRuntime JS
<h1>Calibration</h1>
<ul class="nav navbar-nav">
<li id="Accuracy"><a>Not yet Calibrated</a></li>
<li> <button #onclick="CalibrateWebgazer">Calibrate WebGazer</button></li>
</ul>
<div class="calibrationDiv">
<button class="Calibration" id="Pt1"></button>
<button class="Calibration" id="Pt2"></button>
<button class="Calibration" id="Pt3"></button>
<button class="Calibration" id="Pt4"></button>
<button class="Calibration" id="Pt5"></button>
<button class="Calibration" id="Pt6"></button>
<button class="Calibration" id="Pt7"></button>
<button class="Calibration" id="Pt8"></button>
<button class="Calibration" id="Pt9"></button>
</div>
#code {
private async Task CalibrateWebgazer()
{
await JS.InvokeAsync<object>("Restart");
}
public async ValueTask DisposeAsync() => await this.DisposeAsync();
}
I placed all the javascript files in a wwwroot/js folder and added their script tag in the _Layout.cshtml file:
`<script src="_framework/blazor.server.js"></script>
<script src="~/js/main.js"></script>
<script src="~/js/webgazer.js"></script>
<script src="~/js/gaze.js"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/calibration.js"></script>
<script src="~/js/precision_calculation.js"></script>
<script src="~/js/precision_store_points.js"></script>
<script src="~/js/resize_canvas.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>`
When clicking on the calibration button, the functions defined in $(document).ready(function() are not executed.
What do I need to change to make this work? And how and when does this $(document).ready(function() get called? In the provided HTML example only the Restart function from main.js is called - why should the $(document).ready(function() from calibration.js fire in that case or have I missed something? As I'm very new to programming, I highliy appreciate explanations, why this doesn't work.
Okay, let's see. I haven't read the docs regarding WebGazer.js and what scripts order should be, so I checked the code example you provided. And I noticed that scripts there are being imported differently compared to yours.
So, in _Layout.cshtml try to put these at the bottom of the body tag like this:
<script src="_framework/blazor.server.js"></script>
<script src="~/js/jquery/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="~/js/webgazer.js"></script>
<script src="~/js/main.js"></script>
<script src="~/js/calibration.js"></script>
<script src="~/js/precision_calculation.js"></script>
<script src="~/js/precision_store_points.js"></script>
#*<script src="~/js/gaze.js"></script>*#
<script src="~/js/resize_canvas.js"></script>
<script src="~/js/bootstrap.min.js"></script>
You may notice that ~/js/gaze.js is commented. Unfortunately, I could not find this script in the GitHub repository you provided, but it appears to be according to your code.
At this moment we are almost done. If you try to run the application, you will get errors in the browser's Dev Tools Console saying that Cannot read properties of null (reading 'getContext') at ClearCanvas (calibration.js:10:10). To solve this issue, you have to provide a canvas element in the HTML like this:
#page "/Calibration"
#inject IJSRuntime JS
<h1>Calibration</h1>
------------------------------------RIGHT HERE-----------------------------------
<canvas id="plotting_canvas" width="500" height="500" style="cursor:crosshair;"></canvas>
------------------------------------RIGHT HERE-----------------------------------
<ul class="nav navbar-nav">
<li id="Accuracy"><a>Not yet Calibrated</a></li>
<li> <button #onclick="CalibrateWebgazer">Calibrate WebGazer</button></li>
</ul>
<div class="calibrationDiv">
<button class="Calibration" id="Pt1"></button>
<button class="Calibration" id="Pt2"></button>
<button class="Calibration" id="Pt3"></button>
<button class="Calibration" id="Pt4"></button>
<button class="Calibration" id="Pt5"></button>
<button class="Calibration" id="Pt6"></button>
<button class="Calibration" id="Pt7"></button>
<button class="Calibration" id="Pt8"></button>
<button class="Calibration" id="Pt9"></button>
</div>
#code { . . . }
I also found it in the example code you provided. It should work!
I have blocks of HTML & JS and want to compile it all in to one JS file so I can use a one line embed on external client sites. Like <script src="http://example.com/assets/js/myembed.min.js"></script>
Sample Code
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>
<script>
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
alert('confirmed');
} else {
alert('canceled');
}
});
});
</script>
Should I wrap it all in document.write or is the a better method to achieve this? And if this is the best way, what is the best way to do this automatically, I.e. Using Grunt/Gulp?
E.g.
document.write("<div class=\"page-container\">");
document.write(" <div class=\"container\">");
document.write(" <br \/>");
document.write(" <button class=\"btn launchConfirm\">Launch Confirm<\/button>");
document.write(" <\/div>");
document.write("<\/div>");
Thanks in advance.
Do not use document.write.
var x = '<div> All your html code store in variable </div>';
$("#InsertHere").html(x); // insert where you want
or document.getElementById("InsertHere").innerHTML = x;
// continue your actual code once those elements are ready
$('.launchConfirm').on('click', function (e) { }
It is quite not possible to embbed html code without using DOM insertion methods which always requires selector. You could create a unique class name
and the tag that has that class name will be inserting this code. This is what jQuery does too.
<div class=".innerHTML"></div> // you have to ask them to create such element
Quick and dirty would be to copy the HTML to text-editor of choice, replace newlines and indentation, then add all html as one line. And use single quotes so you dont have to escape the double-quotes
I'm new in JavaScript and I took an app here to learn how to use the language.
So, In my index.html I have this code here:
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore">Reset</button>
<script type="text/javascript">
function reset() {
localStorage.setItem('total_win', 0);
localStorage.setItem('total_lose', 0);
}
</script>
</div>
and this as footer:
`<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>`
What I'm basically trying to do is just reset the score to zero. But It's not working...
I tried to put some alert() inside reset() function but didn't work also.
Does someone has a clue why this is happening?
Thanks for helping!
Use onclick property:
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore" onclick="reset()">Reset</button>
<script type="text/javascript">
function reset() {
localStorage.setItem('total_win', 0);
localStorage.setItem('total_lose', 0);
}
</script>
</div>
You are declaring the function but not calling it anywhere. So you need to call the function at onclick event of button.
You should add an event listener for the click event.
Because of your comment, you can change the DOM by changing the inner HTML, see below snippet and code:
document.getElementById('resetscore').addEventListener('click',function() {
//localStorage.setItem('total_win', 0);
//localStorage.setItem('total_lose', 0);
document.getElementById('total_win').innerHTML = 0;
document.getElementById('total_lose').innerHTML = 0;
});
document.getElementById('win').addEventListener('click',function(){
var a = parseFloat(document.getElementById('total_win').innerHTML);
document.getElementById('total_win').innerHTML = (a+1).toFixed(0);
});
document.getElementById('loss').addEventListener('click',function(){
var b = parseFloat(document.getElementById('total_lose').innerHTML);
document.getElementById('total_lose').innerHTML = (b+1).toFixed(0);
});
<div data-role="collapsible">
<h3>Reset Score</h3>
<button type="button" id="resetscore">Reset</button>
<button type="button" id="win">+1 Win</button>
<button type="button" id="loss">+1 Loss</button>
</div>
<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>
your script tag can't be inside a div. You need to move all your javascript to the end of your body, right before its closing tag, after all the html
Just add this:
<button type="button" onclick="reset()" id="resetscore">
You need to tell which one of your functions to use, notice the onclick, it does just that, so reset executes on click
Your button needs to call reset
<button type="button" id="resetscore" onclick="reset()">Reset</button>
Whenever I remove a dom element that precedes an element that has a ng-click attribute specified, it will no longer call the function that the ng-click references.
Here is an example of it not working. Note: if you change if(true) to if(false) and click save it will properly call the function.
function MainCtrl($scope) {
$scope.submit = function() {
alert('submitted');
}
function load() {
if(true){
$('#resetPassword').remove();
}
}
load();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
<div ng-controller="MainCtrl">
<div class="btn-group m-b-20 pull-right" role="group">
<button type="button" id="resetPassword" class="btn btn-success">Reset Password</button>
<button type="button" class="btn btn-success" ng-click="submit();">Save</button>
</div>
</div>
</div>
I don't know why this is happening, but you should not use jQuery. Use ng-if to add or remove the button on condition. That's the way to go with Angular. jQuery's remove here looks dirty. ng-show just show or hides, but ng-if adds or removes the element from the DOM. It's what you want, and by far the simplest solution.
You should try to accomplish this with a custom directive. E.g:
JS
app.directive("removeClick", function() {
return {
link:function(scope,element,attrs)
{
element.bind("click",function() {
element.remove();
});
}
}
});
HTML
<div ng-app>
<div ng-controller="MainCtrl">
<div class="btn-group m-b-20 pull-right" role="group">
<button type="button" id="resetPassword"class="btn btn-success">Reset Password</button>
<button remove-click type="button" class="btn btn-success" ng-click="submit();">Save</button>
</div>
</div>
</div>
You are free to use getElementbyId at this point, although you should probably try to pass the correct element to your directive. This will probably give you a basic understanding of angular directives.
https://docs.angularjs.org/guide/directive
i am trying to load ticket.htm from holiday.html using ajax. when i click on "Get Ticket" it is supposed to slide the para from ticket.htm but i am getting nothing .All i can see is a button.so far my script went like this..
<script>
$(document).ready(function()
{
$("#button").on('click','#submit',function()
{
$.get("ticket.htm",function(response)
{
$('#content').html(response).slideDown();
});
});
});
</script>
<body>
<div id="button">
<input id="submit" type="submit" value="Get Ticket"/>
</div>
<div id="content">
</div>
</body>
ticket:
<p class="button-para">Flight Details: Air Asia<br>
Schedule: 20-01-2015 (10:15 AM)<br>
Gate C
</p>
$('#content').html(response).slideDown(); // appending response to the newly added div
<body>
<div id="button">
<input id="submit" type="submit" value="Get Ticket"/>
</div>
<div id="content"></div> // Added a new div with id content
</body>
EDIT: This issue was due to calling xmlhttp request (AJAX) without using a webserver. Once the xampp (apache,php,mysql) is installed the problem solved