I'm stuck. I really don't know what I'm doing wrong, but I can't get a string returned to a variable in my embedded Javascript.
token.js:
function token () {
return "mysecretstring";
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TXTURE Server Status</title>
<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
token_val="";
$.getScript('./token.js', function(data) {
token_val = token();
console.log("function: " + token_val);
});
</script>
</head>
<body>
</body>
</html>
I can do whatever I want, token_val remains empty. Any hints appreciated.
Best regards, Thomas
I do not use that way to reference a function js. I simply load the library js as same your loads jquery-1.12.4.min.js and then I make the call to the function token() from the script.
Code look like that:
<script src="path_to_project/tokens.js" type="text/javascript"></script>
<script type="text/javascript">
token_val = token();
console.log("function: " + token_val);
</script>
Could you try to change your URL argument from "./token.js" to "/token.js"?
I modified the code a little bit to get not confused by too many tokens. Somewhere in the middle I got the error "Unexcpected token error", which is somehow misleading when using a function with the same name. :)
Anyway, that's the code now which works.
Javascript:
function myaccesstoken() {
return "mysecrectstring";
}
HTML:
<script src="token.js" type="text/javascript"></script>
<script type="text/javascript">
let token_val = myaccesstoken();
</script>
Easy as that but somethimes you stare at walls without seeing the windows to your left ... anyway, thanks.
Regards, Thomas
Simply don't use your jQuery $.getScript(), but include the script that contains token() function with
<script type="text/javascript" src="/pathToScript">
And use the function
Related
I have a JS file that exports some functions. I need one of those in the download attribute of the HTML body tag. How do I import the JavaScript function into the inline HTML?
I tried the following:
JS file
export function initPage() { ... }
HTML file
<script type="module" src="js/script.js"></script>
<body onload="initPage()">
But I get this error message:
Uncaught ReferenceError: initPage is not defined
I've found a Stackoverflow question but lost the URL to it. If someone knows which question I mean, please share the link and I'll delete this question
Thank you!
You could try following:
{...}
<body>
{...}
<!-- End of the body -->
<script type="module">
import {initPage} from '...';
document.addEventListener('DOMContentLoaded', function(event) {
initPage();
});
</script>
</body>
Basically the event listener DOMContentLoaded might be a modern way of solving your problem.
I've found a solution which is very easy, not quite exact that what I wanted but it works:
<script type="module">
import {initPage} from "./js/file.js";
document.querySelector("body").onload = function () { initPage(); } ;
</script>
Now the <script>-Tags with a src attribute aren't necessary anymore.
I did some tries and what seemed to work for me was to remove type="module" from the script tag and the export from the js function
Edit: What I meant was something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/script.js"></script>
</head>
<body onload="initPage()">
</body>
</html>
and
function initPage() {
console.log('hupp');
}
At a complete loss here for what I assume is a very simple problem, thanks for the help in advance.
I have a HTML doc;
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Sketch</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="main.js"></script>
<script src="https://use.fontawesome.com/1f87fe0ccc.js"></script>
</head>
and here is my main.js file
function _(selector) {
return document.querySelector(selector);
}
function setup() {
const canvas = createCanvas(650, 600);
canvas.parent("canvas-wrapper");
background = color(255);
}
This should be creating a white canvas on my webpage but nothing is happening and Im concerned I have linked the file incorrectly.
There are several errors with your code. First off, you need to call all the functions that are supposed to run some code: This is how you do it: function_name().
The second thing you do is to define the function createCanvas, This function name looks similar to the P5JS library's createCanvas function, so I'm assuming that you are trying to use P5JS.
Add this to your head tag:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
For more information please visit P5JS Library
So I embedded a chatango tab on my website, but I get this error when validating it for HTML.
The text content of element script was not in the required format: Expected space, tab, newline, or slash but found { instead.
Any workarounds for this? Thank you!
<script id="cid0020000101807397328" data-cfasync="false" async src="//st.chatango.com/js/gz/emb.js" style="width: 603px;height: 471px;">
{"handle":"********","arch":"js","styles":{"a":"000000","b":100,"c":"a0a0a0","d":"FFFFFF","e":"202020","g":"bbbbbb","h":"202020","j":"c0c0c0","k":"0084ef","l":"606060","m":"0084ef","n":"FFFFFF","p":"10","q":"000000","r":100,"pos":"br","cv":1,"cvfntsz":"14px","cvbg":"3366ff","cvw":600,"cvh":30,"surl":0,"allowpm":0,"cnrs":"0.35","ticker":1,"fwtickm":1}}</script>
As Ben said - you cannot use code inside tag with src.
But here is some valid and working solution:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>chatango</title>
</head>
<body>
<script type="text/javascript">
var chatango = document.createElement('script');
chatango.setAttribute('type','text/javascript');
chatango.setAttribute('id','cid0020000101807397328');
chatango.setAttribute('data-cfasync','false');
chatango.setAttribute('async',true);
chatango.setAttribute('src','//st.chatango.com/js/gz/emb.js');
chatango.setAttribute('style','width: 603px;height: 471px;');
chatango.innerHTML = '{"handle":"1shotgg","arch":"js","styles":{"a":"000000","b":100,"c":"a0a0a0","d":"FFFFFF","e":"202020","g":"bbbbbb","h":"202020","j":"c0c0c0","k":"0084ef","l":"606060","m":"0084ef","n":"FFFFFF","p":"10","q":"000000","r":100,"pos":"br","cv":1,"cvfntsz":"14px","cvbg":"3366ff","cvw":600,"cvh":30,"surl":0,"allowpm":0,"cnrs":"0.35","ticker":1,"fwtickm":1}}';
document.body.appendChild(chatango);
</script>
</body>
</html>
I have some JavaScript which needs access to some data available on the server. In the past, I just used PHP to include some JavaScript in the original page download which would create an object, and used that. I would like to try doing so differently, and instead download some JSON and use that.
How is this accomplished. I made up the following and don't know if it is the "right" way.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script type="text/javascript">
//Disable all events using JavaScript. How is this done?
</script>
</head>
<body>
<script type="text/javascript">
//Allow events which were previously disabled
//$(function(){}); not needed since end of the page
$.getJSON( 'getMyJSONstuff.php', function(myJSONstuff) {
$('#elem1').plugin1({x:myJSONstuff.x});
$('#elem2').plugin2({y:myJSONstuff.y});
});
$('#elem3').plugin2({y:123});
$('#elem4').plugin3({z:321});
</script>
</body>
</html>
Im begginer in WebProgramming so maybe my questuion will seem naive to some of you.
I want to run a simple JavaScript function without any click to implement a redirection.
I try this:
#inherits System.Web.WebPages.WebPage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
</body>
</html>
But it dosen't work.
Any idea wat I am missing?
Thank you in advance.
Simply use window.location="http://www.newlocation.com". See the example below:
<head>
<script type="text/javascript">
<!--
function Redirect()
{
window.location="http://www.newlocation.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>
More info here
You can use Meta tag for client side redirection.
<META http-equiv="refresh" content="5;URL=http://www.example.com">
Which will redirect the user to http://www.example.com after 5 seconds.
window.location is a property of window object.
You can try function version too
function myCustomHref() {
window.open ('http://www.newlocation.com', '_self');
}
Here you can find more optional properties
if you want to redirect from a webpage to another using javascript,then you can try the following script,
<script>
function newPage() {
window.location.assign("http://www.w3schools.com")
}
</script>
For full details you can view the following website,
http://www.w3schools.com/js/js_window_location.asp