Change type for input id dynamically from external JavaScript file

Question

my page.php contains div id="container" with id="input" which default type is input type="text":

    <div class="container">  
        <div class="row">  
            <div class="col-75"> 
                <div id="container">
                    <input type="text" id="input" value="" name="password">
                </div>    
                <input type="submit" value="OK" id="logBtn">  
           </div> 
        </div> 
    </div>

I want to change input type="text" to input type="password" for same input id="input" with receiving of value textToPassType(1):

function textToPassType(val1){
  if (val1 == 1){
     document.getElementById('input').type = 'password';
  } else if (val1 == 0){
     document.getElementById('input').type = 'text';
  }
}

This way works only if I call this function included to page.php, but if use it in external document: <script type="text/javascript" src="myjs.js"></script> method does not works. So, I'm looking for some correct method to change input type dynamically and keep same id name from external myjs.js to my page.php

Code works fine. So what are you doing wrong? How are you calling `textToPassType` — epascarello, Aug 26 '19 at 13:09
@epascarello Hello, I'm just calling it from one of if statement conditions, which console it true during typing to the same text-box `textToPassType(1);`, but it does not changes text to password, even if I call this function with load — , Aug 26 '19 at 13:18
@ epascarello yes, I see. and I can't find out what is wrong here, I have removed all css and focus caret function, but same result — , Aug 26 '19 at 13:25
@epascarello Yes, works successfully if included to `page.php`, but sorry, I've missed main point, please check my edit, because I want change it from external `myjs.js` in `page.php` — , Aug 26 '19 at 13:57
well sounds like you are not including the external document correctly. — epascarello, Aug 26 '19 at 13:58
@epascarello well all other code works correctly with same 'input' variable `` — , Aug 26 '19 at 13:59
With the information provided it is impossible to help. Inspect the file, make sure the code is in it. Look at the console for errors. Add debug statements to make sure things are called. — epascarello, Aug 26 '19 at 15:01

score 1 · Answer 1 · answered Aug 26 '19 at 12:59

var is a keyword in JavaScript, used to declare a variable, you can't use it as a variable name, try naming your variable val or something:

function textToPassType(val) {
  if (val == 1) {
    document.getElementById('input').type = 'password';
  } else if (val == 0) {
    document.getElementById('input').type = 'text';
  }
}

textToPassType(1);

<div class="container">
  <div class="row">
    <div class="col-75">
      <div id="container">
        <input type="text" id="input" value="" name="password">
      </div>
      <input type="submit" value="OK" id="logBtn">
    </div>
  </div>
</div>

Hello, It was a typo with var, failure caused by something else, because I've missed main point, sorry for that, please check my edit, because I want change it from external `myjs.js` in `page.php` — , Aug 26 '19 at 14:07

Change type for input id dynamically from external JavaScript file

1 Answers1