I just started learning JS and I keep failing to make a function successfully run via external javascript. I have no idea what is wrong. The thing is that it works when using inline javascript, but not external one. Here's the following code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<title id='title'> Home </title>
</head>
<body>
<input type="button" id="btn" value="testas" onclick="myFunction()" />
<address>
Written by Jon Doe
</address>
<script src="{% static 'javascript/js.js' %}"></script>
</body>
</html>
JS:
function ChangeTitle() {
document.getElementById("title").innerHTML = 'Homepage';
}
I want to change the title of "Home" to "Homepage" but it doesn't work on external JS.
in your JS script you only created function, now you need to call it.
Just add ChangeTitle(); at the end of script.
Related
I am new to Django and I'm trying to implement drag and drop file uploading using dropzone.js. I was follow this tutorial to start of with. Dropzone is working fine and the file is being uploaded and stored correctly, my issues comes with the customization of the dropzone instance. I created a second javascript file to create my custom dropzone like the tutorial showed and included it into the django template. But for some reason this does not change anything, with or without customization javascript file, the dropzone looks exactly the same.
The javascript file:
Dropzone.autoDiscovery = false;
const dropzone = new Dropzone("#drop", {
dictDefaultMessage = "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
The django template file I'm trying to include the script into:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
<!--dropzone js & css-->
<link rel="stylesheet" tpye="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
</body>
</html>
My static file directory is setup correctly, all my other static files load without issues and from the command prompt [15/Jan/2021 15:17:16] "GET /static/converter/main.js HTTP/1.1" 304 0
I can see that the file was found, since 304 stands for Not Modified.
Since I do not know any javascript, I'm not sure if I made a mistake in the javascript file, or if it is a deeper issue. Any help is appreciated.
You need to load the dropzone file before main.js since main.js requires the Dropzone member to exist.
Ok so I found my error, it was a quick fix caused, as always, by human error.
as #schillingt answered, I had to place the main.js include after the dropzone.js
I misspelled Dropzone.autoDiscover = false; as Dropzone.autoDiscovery = false;
I had a = instead of a : in after dictDefaultMessage in main.js
Final main.js:
var myDropzone = new Dropzone("#drop", {
dictDefaultMessage: "Upload your PDF here",
clickable: false,
url: "/upload",
maxFiles: 1,
acceptedFiles: ".pdf",
});
Final Django template:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF2Notes</title>
</head>
<body>
<form method="POST" action="/upload" class="dropzone dz" id="drop">
{% csrf_token %}
<div class="fallback">
<input name="file" type="file">
</div>
</form>
<!--dropzone js & css-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/dropzone/dist/dropzone.css' %}">
<script type="text/javascript" src="{% static 'converter/dropzone/dist/dropzone.js' %}"></script>
<!--default stylesheet-->
<link rel="stylesheet" type="text/css" href="{% static 'converter/style.css' %}">
<script type="text/javascript" src="{% static 'converter/main.js' %}"></script>
</body>
</html>
I have a django server (which is for my personal/local use only) and I am trying to include an interactive game in it (again, for my personal use, not for deployment). I have found this open-source game: https://github.com/MattSkala/html5-bombergirl.git which I found very nice.
I can make this game run from a simple html page but when I tried to make it run inside a django template, it won't work.
Here is the html code that works i.e. from which the game launches in my web browser:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/EaselJS/lib/easeljs-0.8.1.min.js"></script>
<script type="text/javascript" src="bower_components/PreloadJS/lib/preloadjs-0.6.1.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/Entity.js"></script>
<script type="text/javascript" src="js/Player.js"></script>
<script type="text/javascript" src="js/Bot.js"></script>
<script type="text/javascript" src="js/Bonus.js"></script>
<script type="text/javascript" src="js/Tile.js"></script>
<script type="text/javascript" src="js/Fire.js"></script>
<script type="text/javascript" src="js/Bomb.js"></script>
<script type="text/javascript" src="js/Menu.js"></script>
<script type="text/javascript" src="js/InputEngine.js"></script>
<script type="text/javascript" src="js/GameEngine.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<canvas id="canvas" width="545" height="416"></canvas>
<script>
gGameEngine = new GameEngine();
gGameEngine.load();
</script>
</html>
In django, I have updated and loaded all the necessary (js, css, bower_components) static files.
Here is my django views.py:
def game(request):
return render(request, 'game.html')
and my template game.html:
{% extends "base.html" %}
{% block content %}
<canvas id="canvas" width="545" height="416"></canvas>
<script>
gGameEngine = new GameEngine();
gGameEngine.load();
</script>
{% endblock %}
But my page stays blank. No game loading and no error on the webpage nor the terminal ! Nothing happens.
I also tried to add this function into the GameEngine.js file:
function my_run()
{
//document.getElementById("canvas").innerHTML = "Hi there, do I work ?";
gGameEngine = new GameEngine();
document.getElementById("canvas").innerHTML = gGameEngine.load()
}
and modified my template into:
<script src = {% static "game/js/GameEngine.js" %}> </script>
//<p id="canvas">Text for test.</p>
<canvas id="canvas" width="545" height="416"></canvas>
<button type = "button" onClick="my_run()">Click me!</button>
Without success !!
For test, printing "Hi there, do I work?" in the "Text for test" paragraph works. I can therefore say that the static files are correctly loaded. However, nothing happens for the game.
Why ? Does anyone has any idea ?
Thank you in advance for your help.
I resolved my problem. I forgot to update the path of the images and sounds to ones that are understandable by django.
I'm attempting to have my JavaScript code in a file apart from my HTML file.
Linking the 2 scripts between each other works, however stuff like the function document.getElementById() doesn't.
Anyone know how to fix this?
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Boost</title>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h3>
<p id="TopTextParagraph">Hi there</p>
<div>
<button id="clickNext">Next</button>
</div>
</h3>
</body>
</html>
JavaScript code:
document.getElementById("clickNext").onclick = goNext;
function goNext() {
console.log("stuff here")
}
JavaScript works when I put it in the HTML file using <script> </script>, just don't know how to make it work in a separate JavaScript file.
You are adding the script inside head tag. When that snippet is executed clickNext element does not exist in the dom
You can add the script near the closing body tag to resolve the problem & remove from the head tag
<body>
<h3>
<p id="TopTextParagraph"> Hi there</p>
<div>< button id="clickNext"> Next</button></div>
</h3>
<script src="javascript.js"></script>
</body>
So heres my simple angular app. When I run the html file on its own via the browser, the variable name is displayed saying "nothing". However when I integrate it into django by making a dummy view that just calls a template (see views below), no variable name is shown. The only differece is when using django I load the JS files via {% static %} . The html output is the exact same for both except the django version doesn't output the variable name. I have broken the problem down to its simplest form and can't seem to understand what's happening here.
JS files are 100% loaded in django version. Chrome console shows no errors. I originally developed a simple app in angular to integrate with my django app but I can't do anything if this simple issue stands in my way.
views.py
def home_tester(request):
return render(request, 'angular/base.html')
HTML
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
</body>
</html>
app.js
var app = angular.module('ZeTasty',[]);
gridfilter.js
app.controller("GridFilter", function($scope){
$scope.name = 'nothing';
});
you need to add {%verbatim%} and {%endverbatim%} tag
django and angular use the same {{ and }} markers.
by hinting django with {%verbatim%}, he will ignore the {{ and }}. this will allow you to combine angular with django templates
example:
<!DOCTYPE html>
<html ng-app="ZeTasty">
<head>
<meta charset="UTF-8">
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="gridfilter.js" type="text/javascript"></script>
</head>
<body>
<!-- 'verbatim' is required in order to disable Django's template engine
so we could use Angular's syntax -->
{%verbatim%}
<div id="content" ng-controller="GridFilter">
{{name}}
</div>
{%endverbatim%}
</body>
</html>
I'm using Django and I have an HTML file, with this line in the head tag:
<script type="text/javascript" src="/path/to/jquery.js"></script>
This works fine in Chrome, but it seems to have no effect in Firefox 3.6.18. (When I type in $ or jQuery in the Firefox console, I get an error, whereas Chrome just shows it correctly.) The rest of my scripts can't load because of this.
I tried strace, and it seems like the file is, in fact, loaded.
What could be causing this?
More info:
I can't post a lot of the HTML, but some relevant parts:
My HTML file (Django templates):
{% extends "my_base.html" %}
{% load stuff %}
{% block head %}
{{ block.super }}
<script type="text/javascript" src="/media/jquery_listbox/js/jquery-min.js"></script>
<script type="text/javascript" src="/media/jquery_listbox/js/ui.core-min.js"></script>
<script type="text/javascript" src="/media/jquery_listbox/js/ui.dropdownchecklist-min.js"></script>
<link rel="stylesheet" type="text/css" href="/media/jquery_listbox/css/ui.dropdownchecklist.css" />
{% endblock %}
my_base.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
{% block head %}{% endblock %}
</head>
...
</html>
It's hard to tell without seeing the rest of your HTML. With Firebug installed, you can check the Net tab to make sure the jQuery file is requested and returned correctly in Firefox. Or replace the src with Google's hosted jQuery which is https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js - if that works then you know it's a location problem, not a code problem.
First I'd clear the browser cache. Secondly I'd change that local js file to always pull from the Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>