0

Do I want to know why my script is not taken the id value?

I used this code in a separate folder in a single file that was named by test.js this is my starting code.

var myInput = document.getElementById("newPass");
var confInput = document.getElementById("confpsw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var special = document.getElementById("special");    
document.getElementById("Button").disabled = true;

my view code is..

<button id="Button" class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Submit</button>

I got the error like this...

Uncaught TypeError: Cannot set property 'disabled' of null

why my script is not working in cshtml?

Sridhar kumar
  • 7
  • 1
  • 1
  • 8
  • Where is that first line of code? Is it waiting for the button to be rendered on the page before looking it up? – Tyler Roper Aug 10 '18 at 13:51
  • 1
    Generally it’s because [the DOM isn’t loaded yet](https://stackoverflow.com/q/14028959/4642212). But I have no idea about how this works with CSHTML. – Sebastian Simon Aug 10 '18 at 13:52
  • The pieces of code you are showing should certainly work. The error should be somewhere else, so more code maybe? – WhiteMaple Aug 10 '18 at 13:52
  • could you provide us more information? how do you execute your js? also, check the link: https://www.telerik.com/forums/javascript-getelementbyid-returns-null – justMe Aug 10 '18 at 13:53
  • Check this link. https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Kanchan Jha Aug 10 '18 at 13:54

5 Answers5

3

It seems the code is running before the DOM is ready. Try with DOMContentLoaded.

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("Button").disabled = true;
});
Mamun
  • 58,653
  • 9
  • 33
  • 46
  • you are right.. but I want to know one thing my script is working perfectly in PHP. but why my script is not working in c#. – Sridhar kumar Aug 10 '18 at 14:05
  • @Sridharkumar, the position of the code in PHP and CSHTML file may be different. I guess in PHP file the code resides under the BUTTON........ – Mamun Aug 10 '18 at 14:12
1

Check below code may help you. as you need to attached event licenser on Document Content Loaded event.

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("Button").disabled = true;
});
.centered {
  color: black;
  width:100px;
  height:30px;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
<button id="Button" class="centered">Test</button>
1

It has nothing to do with the cshtml.

If you put the line to get the Dom Element in the header, it is not going to work since the DOM is not loaded yet.

Either put the javascript at the end of the body (script or code) or use DOMEvent to run the JS after the DOM has been loaded by the browser.

In JS: https://developer.mozilla.org/fr/docs/Web/Events/load

In JQuery: https://api.jquery.com/ready/

Zysce
  • 1,100
  • 1
  • 10
  • 32
-1

Did you first load the DOM ? 

window.addEventListener('load', () => {
  document.querySelector('#Button').disabled = true;
});
nook
  • 692
  • 8
  • 26
-1

Seems to be working for me. find the code below. this is a simple html file.

<html>
<head>
<script type="text/javascript">

function Clicked(){
    document.getElementById("Button").disabled = true;
}

</script>

</head>

<body>

    <button id="Button" class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Submit</button>
    <button type="button" OnClick="Clicked()">Click Me!</button>

</body>
</html>
Praveen Raju
  • 54
  • 3