Using onclick to change a variable inside a function

Question

My javascript needs to change a variable inside a function if a radio button is clicked. I have tried couple of methods - if else statement being one of them, but nothing has worked so far.

In my last try I tried to execute a function on click where it would reset my variable declared earlier in the first function.

The whole purpose of code is to generate a random password with an option to use special symbols.

It is also meant to be a Chrome extension, so the use of inline code is forbidden.

<html>
    <br>
    <h1>Set the number of characters</h1>
    <input id="num"  type = "number" value = "20" name = "value"><br><br>
    
    <form>
    <input type="radio" type = "text"  id="spec_symb" name="symbols" value="specialSymbols">
    <label for="spec_symb">Use special symbols</label><br>
</form>
<button id="click">Generate</button><br>
    <p id="text" ></p>
    
    <script src="jquery-3.5.1.min.js"></script>
    <script src="pass.js"></script>
    
</html>

function pass(length) {
    var passw = "";
    var symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    document.getElementById("spec_symb").onclick = function(){func()};
    function func(){window.symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_"
 };
 var slength = symbols.length;
    for ( var i = 0; i < length; i++ ) {
       passw = passw + symbols.charAt(Math.floor(Math.random() * slength));
    }
    return passw;}
document.getElementById("click").onclick = function(){myFunction()};
 function myFunction(){
     document.getElementById("text").innerHTML = passw(document.getElementById("num").value);
 }

kdsprogrammer · Accepted Answer · 2021-02-17 16:11:59Z

1

Use your if/else statement with document.getElementById('spec_symb').checked

That should get you in the direction you want to go.

answered Feb 17, 2021 at 16:11

kdsprogrammer

1562 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dante Over a year ago

I was using document.getElementById('spec_symb').clicked == true before, butdocument.getElementById('spec_symb').checked == true actually works. Thank you!

Gunther · Accepted Answer · 2021-02-17 16:14:43Z

0

Everytime you're calling the pass() function you're assigning the symbols variable the value ABC.., you're expecting the user to click on the #spec_symb at the same time the function is called (and thats close to impossible). Instead of doing that you should verify wheater the input is checked or not and then assign it a new value, in your case you can just add to the old string, like the example below.

document.querySelector("#pass").onclick = () => {
  let chars = "ABC...";
  if (document.querySelector("#input").checked)
    chars += "#@$";
  console.log(chars);
};

<input id="input" type="checkbox" />
<button id="pass">Result</button>

I've changed from radio to checkbox so you can unmark it.

answered Feb 17, 2021 at 16:14

Gunther

1,3479 silver badges15 bronze badges

Comments

Scott Marcus · Accepted Answer · 2021-02-17 16:23:08Z

Your structure is a bit off and you are attempting to call the passw function, which doesn't exist.

You should also not be setting symbols inside the pass function. Set it to the default first and possibly override it if the checkbox gets checked.

You should also probably be using a checkbox instead of a radio button, because once the radio button is checked, there's no way to uncheck it.

I think this is what you are after:

// Set reference to DOM elements just once, not in the functions
const input = document.getElementById("num");
const output = document.getElementById("text");
const special = document.getElementById("spec_symb");

special.addEventListener("click", func);
document.getElementById("click").addEventListener("click", myFunction);

// Set the symbols to the default set of characters
let symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
function func(){
  // Override the symbols if the checkbox was checked.
  if(special.checked){
    symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_";
  } else {
    symbols = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  }
}

function myFunction(){
  output.textContent = pass(input.value);
}

function pass(length) {
  var passw = "";
  
  var slength = symbols.length;
  for ( var i = 0; i < length; i++ ) {
    passw = passw + symbols.charAt(Math.floor(Math.random() * slength));
  }
  return passw;
}

<h1>Set the number of characters</h1>
<input id="num"  type = "number" value = "20" name = "value"><br><br>
    
<form>
  <input type="checkbox" id="spec_symb" name="symbols" value="specialSymbols">
  <label for="spec_symb">Use special symbols</label><br>
</form>
<button id="click">Generate</button>
<p id="text" ></p>

Collectives™ on Stack Overflow

Using onclick to change a variable inside a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related