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
– epascarello, Commented Aug 26, 2019 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 — user11137294
– user11137294, Commented Aug 26, 2019 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 — user11137294
– user11137294, Commented Aug 26, 2019 at 13:25

Djaouad · Accepted Answer · 2019-08-26 12:59:58Z

1

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>

answered Aug 26, 2019 at 12:59

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

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

1 Comment

user11137294 Over a year ago

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

Collectives™ on Stack Overflow

Change type for input id dynamically from external JavaScript file

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related