We Keep Coding

Javascript - Change ID to Class to be able to use the class multiple times in a page

I'm trying to display parts of the date on a page using the ID, I have to use the ID multiple times on a page, and I've been told that I need to change that to class, and I'm unsure how to do that.
I've created this jsfiddle.
The HTML is as follows, but I need to use some of those ID's multiple time, and using a second instance of it doesn't show/work.
<p>The date is <a id="date"></a></p>
<p>The current month and year is <a id="month-year"></a></p>
<p>The current day and month is <a id="day-month"></a></p>
<p>The current year is <a id="year"></a></p>
<p>The current month is <a id="month"></a></p>
<p>Today is the <a id="day"></a> of <a id="month"></a></p>
In the last example <a id="month"> will not show.
the JS I'm using is as follows.
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var n = new Date();
var y = n.getFullYear();
var m = n.getMonth();
var d = n.getDate();
var dateObject = document.getElementById("date");
if (dateObject) dateObject.innerHTML = d + " " + months[m] + " " + y;
var month_year = document.getElementById("month-year");
if (month_year) month_year.innerHTML = months[m] + " " + y;
var day_month = document.getElementById("day-month");
if (day_month) day_month.innerHTML = d + " " + months[m];
var year = document.getElementById("year");
if (year) year.innerHTML = y;
var month = document.getElementById("month");
if (month) month.innerHTML = months[m];
var day = document.getElementById("day");
if (day) day.innerHTML = d;
How can I change the above code so I can use the ID/class multiple times on a page?

I think this is what you are after. See the comments for details.
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var n = new Date();
var y = n.getFullYear();
var m = n.getMonth();
var d = n.getDate();
// Get all the containers into a collection
var dateHolders = document.querySelectorAll(".dateHolder");
// Loop over each container in the colletion
dateHolders.forEach(function(holder){
// Search within the container for the first element that
// matches the selector passed to querySelector
var dateObject = holder.querySelector(".date");
var month_year = holder.querySelector(".month-year");
var day_month = holder.querySelector(".day-month");
var day_month = holder.querySelector(".day-month");
var year = holder.querySelector(".year");
var month = holder.querySelector(".month");
var day = holder.querySelector(".day");
// Wrap your branching statements in {}
if (dateObject) { dateObject.textContent = d + " " + months[m] + " " + y; }
if (month_year) { month_year.textContent = months[m] + " " + y; }
if (day_month) { day_month.textContent = d + " " + months[m]; }
if (year) { year.textContent = y; }
if (month) { month.textContent = months[m]; }
if (day) { day.textContent = d; }
});
<!--
<a> elements are for navigation, not simple display of text.
Use more generic tags to show general inline content. Also, wrap the whole
set of data about the date in a container to make it easier to
reproduce it.
-->
<div class="dateHolder">
<span class="date"></span>
<span class="month-year"></span>
<span class="day-month"></span>
<span class="year"></span>
<span class="month"></span>
<span class="day"></span>
</div>
<div class="dateHolder">
<span class="date"></span>
<span class="month-year"></span>
<span class="day-month"></span>
<span class="year"></span>
<span class="month"></span>
<span class="day"></span>
</div>
<div class="dateHolder">
<span class="date"></span>
<span class="month-year"></span>
<span class="day-month"></span>
<span class="year"></span>
<span class="month"></span>
<span class="day"></span>
</div>
<div class="dateHolder">
<span class="date"></span>
<span class="month-year"></span>
<span class="day-month"></span>
<span class="year"></span>
<span class="month"></span>
<span class="day"></span>
</div>

Simply exchange id with class and iterate over the elements. The below code expects that each of the elements will be available in the DOM the same number of times, otherwise you will need to adapt the code.
HTML:
<a class="date"></a>
<a class="month-year"></a>
<a class="day-month"></a>
<a class="year"></a>
<a class="month"></a>
<a class="day"></a>
<br>
<a class="date"></a>
<a class="month-year"></a>
<a class="day-month"></a>
<a class="year"></a>
<a class="month"></a>
<a class="day"></a>
<br>
JS:
let numElements = document.getElementsByClassName("date").length;
for (let i = 0; i < numElements; i++) {
...
var dateObject = document.getElementsByClassName("date")[i];
if (dateObject) dateObject.textContent = d + " " + months[m] + " " + y;
...
}
A fiddle can be found here.

Replacing 'document.write()'

Some javascript on my site places the user's device name as well as location into the text of the website using 'document.write()'
Recently it's been blocked by many browsers and the code isn't being executed.
How can I replace this to make it work correctly? I need it to load at the same time or before everything else.
Here are the two scripts I'm working with:
<script>
function x(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
c = x('city')
m = x('model')
b = x('brand')
phone = x('brand') + ' ' + x('model')
browser = x('browser')
os = x('os')
ip = x('ip')
isp = x('isp')
osversion = x('osversion')
browserversion = x('browserversion')
</script>
<script type="text/javascript">
var dayNames = Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
var today = monthNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear();
function get_date(days)
{return today = monthNames[now.getMonth()] + " " + (now.getDate() - days) + ", " + now.getFullYear();}
</script>
and this is how I'm attempting to implement it:
<div class="main-content flag" id="content1">
<h1>Congratulations <script>document.write(b);</script> User! Your <script>document.write(m);</script> Awesome!</h1>
<div style="text-align:left; width:100%; color:black; font-size:10px;">
<script type="text/javascript">document.write(today);</script>
</div>
</div>

Try this one.
<div class="main-content flag" id="content1">
<h1>Congratulations <span id="brand-elem"></span> User! Your <span id="model-elem"></span> Awesome!</h1>
<div id="today-elem" style="text-align:left; width:100%; color:black; font-size:10px;">
</div>
</div>
<script type="text/javascript">
document.getElementById('brand-elem').innerHTML = b;
document.getElementById('model-elem').innerHTML = m;
document.getElementById('today-elem').innerHTML = today;
</script>
Don't use document.write. Refer Why is document.write considered a "bad practice"?

Display javascript date genererator in submit form

This code is giving output correctly in button type but not in input type. I just want to display the month and year in Submit form.
<input type="submit" id="demo" value="Submit form">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
);
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.write(month_name[curr_month] + "," + curr_year);
}
</script>

js
function getDate() {
var month_name = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
var input = document.getElementById("demo");
input.value = month_name[curr_month] + "," + curr_year;
}
html - or if you want to click it and getDate() put it as onclick="getDate()" within the <input> html tag
<body onload="getDate()">
<input type="submit" id="demo" value="Submit form">
</body>
demo
http://jsfiddle.net/z26mevsv/

this will allso help you
<input type="submit" id="demo" value="Submit form" onclick="getDate();">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March","April", "May", "June","July", "August", "September","October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.write(month_name[curr_month] + "," + curr_year);
}
</script>

so in order to display the value there, you need to get the input element. You have the id="demo", and that is the best way to reference that element. try out the following code:
<input type="submit" id="demo" value="Submit form">
<script language="javascript" type="text/javascript">
function getDate() {
var month_name = new Array("January", "February", "March","April", "May", "June","July", "August", "September","October", "November", "December");
var date = new Date();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
document.getElementById('demo').value = month_name[curr_month] + "," + curr_year;
}
window.onload = function(){
getDate();
}
</script>
of course you need to call your function getDate() from somewhere, so I called that in the onload() function.

Add days from parameter

I need to add a certain amount of days to the date object using parameters in a radio button from an onclick event handler in JavaScript. When I simply add the day to the end it just adds a 1 etc on the end of the date. Any ideas?
var dateObject = new Date();
var month = dateObject.getMonth();
var monthArray = new Array("January", "February", "March", "April",
"May", "June", "July", "August",
"September","October","November","December");
function orderReadyDate(orderTime)
{
var dateToday = monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear();
document.forms[0].txtPickupDate.value = dateToday;
}
Here are my input buttons
<input type="radio" name="item" value="print_5x7" onclick="orderReadyDate(1)" />5x7 Prints(1 day)<br />
<input type="radio" name="item" value="poster" onclick="orderReadyDate(1)" />Poster (1 day)<br />
<input type="radio" name="item" value="mug" onclick="orderReadyDate(2)" />Coffee Mug (2 days)<br />
<input type="radio" name="item" value="shirt" onclick="orderReadyDate(3)" />T-shirt (3 days)</p>

You need to try this:- Notice the setDate method which will add up the date.
var newdate = new Date();
newdate.setDate(newdate.getDate() + orderTime);
var dateToday = monthArray[newdate.getMonth()] + " " +
newdate.getDate() + ", " +
newdate.getFullYear();

var dateToday = monthArray[month] + " "
+ (dateObject.getDate() + orderTime)
+ ", " + dateObject.getFullYear();

Formatting getDate() in JavaScript

I have been playing around with this JavaScript to get the right format on my date output, but with no luck. I need this code to show as Month Day, Year. As of now it's showing dd/mm/yy.
Below is the script I'm using.
<script>
var tD = new Date();
var datestr = tD.getDate() + (tD.getMonth()+ 1) + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");
</script>

Here is a modification of another post here on Stack Overflow. I think this will do what you want.
var tD = new Date();
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var datestr = monthNames[tD.getMonth()] + " " + tD.getDate() + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");

I don't really get it. Is this, what you're looking for?
<script>
var tD = new Date();
var datestr = (tD.getMonth() + 1) + ' ' + tD.getDay() + ", " + tD.getFullYear();
document.write("<input type='hidden' name='date' value='"+datestr+"'>");
</script>