0

hello everyone i try to make a bunch of text inputs to read Only or disabled using JavaScript i know you can do it with read Only attribute but i wanna do it with JavaScript .my problem is it doesn't work in an external JavaScript file but when i put it inside html file it works here is the code 

var myInpts=document.querySelectorAll("input[type=text]");
  for(var i=0;i<myInpts.length;i++)myInpts[i].disabled=true;
  alert(myInpts.length);
Khalid Elfatouaki
  • 5
  • 2
  • 2
    Can you post the html file code that you are currently using? – Abhishek Bag Oct 03 '19 at 18:49
  • 1
    If your javascript not work in external file, that reason is onReady ( because your webpage must be completely load in dom ). you can put your external file in footer of HTML code and test it again. – Mohammadreza Yektamaram Oct 03 '19 at 18:50
  • 1
    Well where is the script tag? – epascarello Oct 03 '19 at 18:56
  • Did you get any errors? If so, please post it as well! Your code should work if the elements exist and the DOM is loaded... – FZs Oct 03 '19 at 18:57
  • 1
    @MohammadrezaYektamaram i did put in the footer as u said and it worked thank you – Khalid Elfatouaki Oct 03 '19 at 18:58
  • @FZs i didnt get any errors but it worked finally when i did put in footer – Khalid Elfatouaki Oct 03 '19 at 18:59
  • @KhalidElfatouaki Then, it's better to place the `script` tag back, and place your code inside this: `document.addEventListener('DOMContentLoaded', ()=>{ /* place code here */ })`, it will make your code more easy to debug, and defers your script until the entire DOM is loaded. See @Bibberty's answer – FZs Oct 03 '19 at 19:01

1 Answers1

1

Add an event listener for DOMContentLoaded this will ensure your code executes when the DOM is ready. 

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll("input[type='text']").forEach(input => {
    input.disabled = true;
  })
});
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">

If you want to toggle based on a click for example:

const toggleInputs = () =>   document.querySelectorAll("input[type='text']").forEach(input => {
    input.disabled = !input.disabled;
  })

document.addEventListener('DOMContentLoaded', () => {
  toggleInputs();
});

document.querySelector('button').addEventListener('click', () => {
  toggleInputs();
});
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<input type="text" value="Test">
<button>Toggle</button>
FZs
  • 11,931
  • 11
  • 28
  • 41
Bibberty
  • 4,282
  • 1
  • 6
  • 22
  • well the code example is wrong..... – epascarello Oct 03 '19 at 19:01
  • 1
    @epascarello I corrected the event. Used click at first, my bad. – Bibberty Oct 03 '19 at 19:04
  • You've written `document.addEventListener('click', ...)` instead of `document.querySelector('button').addEventListener('click', ...)`, so I've corrected it. Why are you always trying to add a click listener to document? – FZs Oct 03 '19 at 19:11
  • @FZs take a look here: [Event Delegation](https://davidwalsh.name/event-delegate) Whilst I agree you might want to scope it. Perhaps wrap the buttons in a `div` the principle is sound. I am assuming in the code there is more than the one button. – Bibberty Oct 03 '19 at 19:35
  • I know how the event delegation works, I've just thought that you've added the button, because you didn't want that any click on the entire page (including the input boxes) to toggle the *disabledness*... – FZs Oct 03 '19 at 19:40
  • @FZ no fair play, one button could definately be assigned lol. – Bibberty Oct 03 '19 at 19:48