-1

(I am new to programming)

The program: I have made a relatively simple JavaScript program, that generates a password when you click on a button.

The problem: Displaying the password with document.write, the whole page is overwritten, meaning that the button is removed and you have no opportunity to generate a new password. Therefore, I would like the password to go inside the paragraph with Id "pw".

Note that document.write is disabled in JSFiddle, so the result is set to display in console. JSFiddle: https://jsfiddle.net/3qh01ctp/1/

Thank you very much in advance, any help/advice appreciated!

var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

function generate () {
  for (i = 0; i < 10; i++) {
    randomLetter = arr[Math.floor(arr.length * Math.random())];
  console.log(randomLetter);
  }
}
<!DOCTYPE html>
<html>
<head>
  <button onclick="generate();">Generate password</button>
</head>
<body>
  <p id="pw">
    <!-- password should go here -->
  </p>
</body>
</html>
thesystem
  • 554
  • 1
  • 10
  • 31
  • 2
    `document.write` is ancient and almost never used. Learn to use DOM-scripting instead. – Mitya May 23 '17 at 10:27
  • 1
    Is this what's you're looking for? https://jsfiddle.net/75wmupch/ If so then I recommend looking up some basic javascript tutorials as those will cover the use of targeting DOM elements such as `document.getElementById()` – NewToJS May 23 '17 at 10:28
  • 1
    Xufox, Utkanos, CBroe: Thank you for the suggestions very much, will definitely look into that. @NewToJS: That is exactly what I was trying to do. I will have to do some more studying, thanks for the help AND the explanation – thesystem May 23 '17 at 10:37
  • 1
    @thesystem You are very welcome, we all started somewhere. Plenty of research and small projects will help you learn and enable you to expand on your development. Just keep things small and simple to start with and it won't feel too much of a headache to learn. I wish you the best of luck. – NewToJS May 23 '17 at 10:40

5 Answers5

4

You shouldn't use document.write(). Nowadays, you usually select an element, and then push the content into it. You can select an element by e.g. one of the following methods:

  • document.getElementById(): selects an element by its ID, it is very fast
  • document.querySelector(): selects an element by its CSS selector (not that fast, but good enough)

So here is an example:

var pw = 'password';
document.getElementById('pw').textContent = pw;

Or with the querySelector:

var pw = 'password';
document.querySelector('#pw').textContent = pw;

I've used .textContent on the node, because it prevents accidental HTML injection. If you explicitly want to allow HTML, you can also use .innerHTML.

And finally, here the complete example (including a button to execute the function):

var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

function generate () {
    var password = "";
    for (i = 0; i < 10; i++) {
        var randomLetter = arr[Math.floor(arr.length * Math.random())];
        password += randomLetter;
    }
    document.getElementById("pw").textContent = password;
}

document.querySelector('#button-clicker').addEventListener('click', function (event) {
    event.preventDefault();
    generate();
});
<p id="pw"></p>
<button id="button-clicker">click</button>
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
1

I updated your code please check. using id of you p tag you can place text on that. In you loop keep appending to randomLetter after looping just give it to innerHTML of your p tag document.getElementById("pw").innerHTML = randomLetter;

var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var randomLetter ='';
function generate () {
  for (i = 0; i < 10; i++) {
    randomLetter += arr[Math.floor(arr.length * Math.random())];
  
  }
   document.getElementById("pw").innerHTML = randomLetter;
  randomLetter ='';
}
<!DOCTYPE html>
<html>
<head>
  <button onclick="generate();">Generate password</button>
</head>
<body>
  <p id="pw">
    <!-- password should go here -->
  </p>
</body>
</html>
Dinesh undefined
  • 5,490
  • 2
  • 19
  • 40
1

var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

function generate () {
  var randomLetter="";
  for (i = 0; i < 10; i++) {
    randomLetter += arr[Math.floor(arr.length * Math.random())];
    
  //console.log(randomLetter);
  }
document.getElementById("pw").innerText =randomLetter ;
}
<!DOCTYPE html>
<html>
<head>
  <button onclick="generate();">Generate password</button>
</head>
<body>
  <p id="pw">
    <!-- password should go here -->
  </p>
</body>
</html>
Kuru
  • 738
  • 5
  • 18
  • You are overwriting the innerHTML leaving it to only out put last result from the loop. – NewToJS May 23 '17 at 10:30
  • My bad, changed – Kuru May 23 '17 at 10:32
  • Now `randomLetter` isn't defined. You must define it in the function but before the loop. I would recommend you define it with a empty value. – NewToJS May 23 '17 at 10:33
  • @NewToJS updated.... working fine... – Kuru May 23 '17 at 10:34
  • This would be better if what currently is called `randomLetter` would have a better name. That variable holds the _whole password_, not one random letter. – Sebastian Simon May 23 '17 at 10:38
  • 1
    yap i agree, something like `genpassword`. But i don't want make like i wrote new set of code... – Kuru May 23 '17 at 10:40
  • @Kuru Thanks for showing how to code it, appreciate it – thesystem May 23 '17 at 10:45
  • @Kuru I found your code to be the most useful, as you altered my code the least. However, I have one question. Is it not possible to assign randomLetter (the password) to "pw" without making randomLetter an empty string within the code? It seems a little confusing to me – thesystem May 25 '17 at 15:30
  • you need to make a empty string, because at start we don't have any value for "randomLetter ", that mean the variable is declared but not initialized and we can't use variable in a calculation without initializing it, it will raise error. In this code`randomLetter += arr[Math.floor(arr.length * Math.random())];` we are telling is `randomLetter = randomLetter + arr[Math.floor(arr.length * Math.random())];` so if `randomLetter` doesn't have any value, the calculation cannot be done.... Did you get the idea? – Kuru May 25 '17 at 16:29
  • @thesystem happy it helps you – Kuru Jun 09 '17 at 03:35
0

what you have to do is , Populate the content i.e Random Generated Password in Seprate HTML Body content , it can be Paragraph or Div, Use the java script code as :

document.getElementById('YOUR FIELD ID').innerHTML = "YOUR TEXT";
shubh14896
  • 156
  • 1
  • 12
-1

Do this in your script tag.

var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

function generate () {
var randomLetter = "";
  for (i = 0; i < 10; i++) {
    randomLetter += arr[Math.floor(arr.length * Math.random())];
  }
  
  var paraElem = document.getElementById("pw");
  var t = document.createTextNode(randomLetter);
  paraElem.appendChild(t)
}
Amitpal Rawat
  • 116
  • 1
  • 5