How to pass javascript from ". js" to HTML

Question

How to pass javascript from ". js" to HTML

Asked 6 years, 3 months ago

Viewed 230 times

-1

I have the following code embedded in my HTML:

<script>
// dec2hex :: Integer -> String
function dec2hex (dec) {
  return ('0' + dec.toString(16)).substr(-2)
}

// generateId :: Integer -> String
function generateId (len) {
  var arr = new Uint8Array((len || 40) / 2)
  window.crypto.getRandomValues(arr)
  return Array.from(arr, dec2hex).join('')
}   
document.write(generateId(20))
</script>

Everything works fine but would like to have all javascript together in a file ". js"

My question is how to move to a ". js" file and return the result to HTML?

I did the following, created a "test.js" with:

// dec2hex :: Integer -> String
function dec2hex (dec) {
  return ('0' + dec.toString(16)).substr(-2)
}

// generateId :: Integer -> String
function generateId (len) {
  var arr = new Uint8Array((len || 40) / 2)
  window.crypto.getRandomValues(arr)
  return Array.from(arr, dec2hex).join('')
}

And in HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="js/teste.js"></script>
  <meta charset="utf-8">
  <title>Random String Generator</title>
</head>
<body>
    <p>generateId: id="generateId(20)"</p>
</body>
</html>

It doesn’t work. Can anyone help this Noob?

you want to put the test.js, inside a js directory?

– Gabriel Gonçalves

2018/08/18 at 19:16
Yes, Gabriel. That won’t be a problem, I’ll do it in production when I understand how to pass the string to HTML. Thank you!

– foiovitor

2018/08/18 at 19:19
If you want to put the test.js file inside a directory it has to look like this in the HTML <script src="js/test.js"></script>

– Gabriel Gonçalves

2018/08/18 at 19:21
And how to pass the javascript result to the user page?

– foiovitor

2018/08/18 at 19:22
I took the test here and is passing normal the generated result

– Gabriel Gonçalves

2018/08/18 at 19:31
https://jsfiddle.net/vitoreis/g34r5cvp/

– foiovitor

2018/08/18 at 19:49
your link does not want to load and in the second part of the JS, the return Document.write(generateId(20));

– Gabriel Gonçalves

2018/08/18 at 20:37

Show 2 more comments

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Anderson Santos • 31 points · Answer 1 · 2018-08-18T20:14:36+00:00

I believe you have to move your html, the way you did the result is just text and you’re not calling the function.

Try this change using javascript instead of within HTML.

Include an id for your tag <p>:

<p id="paragrafo"> </p>

Include function call via javascript.

<script>

    window.onload = function(){
     document.getElementById('paragrafo').innerHTML = "GeneratedId: id=" 
     +generateId(20);
}


</script>

Follow the fiddle with example:

https://jsfiddle.net/guidi/kontvLsu/3/