Set label text using JavaScript on a .aspx page

Question

I have put this JavaScript code in file JavaScript.js:

var target = Number(prompt("Enter The New Number"));
function monthName(){
    var month = target == 1 ? month = "January" : target == 2 ? month = "February" : target == 3 ? month = "March" : target == 4 ? "April" : target == 5 ? "May" : target == 6 ? "June" : target == 7 ? "July" : target == 8 ? "August" : target == 9 ? "September" : target == 10 ? "October" : target == 11 ? "November" : target == 12 ? "December" : "Unknown Month";
    return month;
}
document.getElementById('yes').html= monthName();

And added a label with this particular id.

<label id="yes" ></label>

there is no html, there is innerHTML. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML — epascarello, Jan 05 '17 at 17:50
Your ternary is evaluating like `var month = month = "January"`, etc... — Jon Uleis, Jan 05 '17 at 17:51
@epascarello i tried innerHTML , InnerText, TextContent also but nothing happened. — Rajan Mishra, Jan 05 '17 at 17:52
Please search first: [`javascript dom element set content`](https://www.google.com/search?q=javascript+dom+element+set+content&ie=UTF-8&oe=UTF-8) — Felix Kling, Jan 05 '17 at 17:52
Well what is the error in your console. My guess is you have an error that is undefined or null. — epascarello, Jan 05 '17 at 17:53
@RajanMishra Where did you place this script? Ensure that you are running the script after the target element has loaded. — Rajaprabhu Aravindasamy, Jan 05 '17 at 17:53
Something certainly happens: https://jsfiddle.net/8kxfLn6r/ . — Felix Kling, Jan 05 '17 at 17:53
Side note: Don't nest the conditional operator like that. It can make the code difficult to read. You can just use an array of names here. — Felix Kling, Jan 05 '17 at 17:55

mplungjan · Answer 1 · 2017-01-05T18:18:10.813

input check the number
use an array if acceptable input
assign to innerHTML (case sensitive)
function can only run AFTER the label exists in the DOM
note for the future that JS months are 0 based (not relevant here)

function monthName(month) {
  month = month.trim();
  if (isNaN(month) || month == "" || month < 0 || month > 12) return "unknown";
  return ["unknown", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month];
}
// this needs to be after the label exists or wrapped in 
// window.onload=function() {...} or similar 
document.getElementById('yes').innerHTML = monthName(prompt("Enter The New Number", ""));

<label id="yes"></label>

I'd also add the condition of `month < 0` since you do have `month > 12`. — Rahul Desai, Jan 05 '17 at 18:10

score 1 · Accepted Answer · edited Oct 06 '18 at 11:17

1

As pointed out by @epascarello, use .innerHTML instead of .html.

The Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

Read up: Element.innerHTML - Web APIs | MDN

Working snippet:

document.addEventListener("DOMContentLoaded", function(event) {

  var target = Number(prompt("Enter The New Number"));

  function monthName() {
    var month = target == 1 ? month = "January" : target == 2 ? month = "February" : target == 3 ? month = "March" : target == 4 ? "April" : target == 5 ? "May" : target == 6 ? "June" : target == 7 ? "July" : target == 8 ? "August" : target == 9 ? "September" : target == 10 ? "October" : target == 11 ? "November" : target == 12 ? "December" : "Unknown Month";
    return month;
  }

  document.getElementById('yes').innerHTML = monthName();

});

<label id="yes"></label>

In response to your comment, add your existing JavaScript code in the event listener of DOMContentLoaded with the fix of .innerHTML, just to make sure that it is executed after DOM content is loaded. Make sure that you use @mplungjan's JavaScript code inside of the DOMContentLoaded event handler since it is well written and better than mine.

edited Oct 06 '18 at 11:17

Peter Mortensen

30,738
21
105
131

answered Jan 05 '17 at 17:54

Rahul Desai

15,242
19
83
138

already tried it. – Rajan Mishra Jan 05 '17 at 17:57
@RajanMishra But this demo works - did you try it? Though I'd still replace the unnecessary `month = "January"`, etc with just `"January"`. – Jon Uleis Jan 05 '17 at 17:57
@RajanMishra Please elaborate on what the problem is after using my code. Any error in the JS console? Any other unexpected behavior? – Rahul Desai Jan 05 '17 at 17:59
the value returned by the function which is assigned to that dom element is not getting accessed because id is listing as null. – Rajan Mishra Jan 05 '17 at 18:00
This code works, but is using a lot of side effects to do so. – mplungjan Jan 05 '17 at 18:05
@RajanMishra Please check the EDIT in my updated answer above. – Rahul Desai Jan 05 '17 at 18:09
@mplungjan Yep, I'd clean up the ternary mess as you did already. – Rahul Desai Jan 05 '17 at 18:12
1

@RahulDesai yeah thanks that really worked. – Rajan Mishra Jan 05 '17 at 18:16
1

@RajanMishra Glad to hear that. Make sure that you use @mplungjan's JS code inside of the `DOMContentLoaded` event handler since it is well written and better than mine. – Rahul Desai Jan 05 '17 at 18:19
@rahuldesai pretty sure i'il mind that. – Rajan Mishra Jan 05 '17 at 18:21
@RajanMishra why the un-accept of my answer? – Rahul Desai Oct 12 '18 at 19:06

Set label text using JavaScript on a .aspx page

2 Answers2