Setting an href on click with a for loop

Question

I am trying to make a set of buttons auto-populate with the correct hrefs. The function setLink() is not returning what I expect (which would be something like localhost:44369/Timeline?d=2020/7/3). I think that it is because it is not actually using my values m[i],d[i], and y[i], but I'm not sure how to fix it.

var curr = new Date(); // get current date
var first = curr.getDate() - curr.getDay(); // First day is set to the  day of the month minus the day of the week
var last = first + 6; // last day is the first day + 6

var day = new Array(7);
day[0] = new Date(curr.setDate(first));
for (i = 1; i < 7; i++) {
  //This for loop creates the time info for each day with the following loop pulls the month and date out of
  day[i] = new Date(curr.setDate(curr.getDate() + 1));
}

var m = new Array(7);
var d = new Array(7);
var y = new Array(7);
for (i = 0; i < 7; i++) {
  //This for loop adds the date
  m[i] = day[i].getMonth() + 1;
  d[i] = day[i].getDate();
  y[i] = day[i].getYear();
  document.getElementById("Timeline-Day" + i).innerHTML += m[i] + "/" + d[i];
  document.getElementById("Timeline-label" + i).onclick = function() {
    setLink();
  };
  function setLink() {
    location.href = '"?d=" y[i] + "/" + m[i] + "/" + d[i]"';
  }
}

and my html

 <div style="margin-left:6rem;" id="timelineDiv" class="btn-group btn-group-toggle my-auto col-lg-9" data-toggle="buttons">
      <label onclick="" id="Timeline-label0" class="week btn">
          <span id="Timeline-Day0" class="timeline-label"></span>
          <input type="radio" alt="Sunday" id="option1">
      </label>
      <label id="Timeline-label1" class="week btn">
          <span id="Timeline-Day1" class="timeline-label"></span>
          <input type="radio" name="options" alt="Monday" id="option2">
      </label>
      <label id="Timeline-label2" class="week btn">
          <span id="Timeline-Day2" class="timeline-label"></span>
          <input type="radio" name="options" alt="Tuesday" id="option3">
      </label>
      <label id="Timeline-label3" class="week btn">
          <span id="Timeline-Day3" class="timeline-label"></span>
          <input type="radio" name="options" alt="Wednesday" id="option4">
      </label>
      <label id="Timeline-label4" class="week btn">
          <span id="Timeline-Day4" class="timeline-label"></span>
          <input type="radio" name="options" alt="Thursday" id="option5">
      </label>
      <label id="Timeline-label5" class="week btn">
          <span id="Timeline-Day5" class="timeline-label"></span>
          <input type="radio" name="options" alt="Friday" id="option6">
      </label>
      <label id="Timeline-label6" class="week btn">
          <span id="Timeline-Day6" class="timeline-label"></span>
          <input type="radio" name="options" alt="Saturday" id="option7">
      </label>
</div>

This line needs to be fixed location.href = '"?d=" y[i] + "/" + m[i] + "/" + d[i]"'; to location.href = "?d=" + y[i] + "/" + m[i] + "/" + d[i]; — Siddharth Seth
– Siddharth Seth, Commented Jul 3, 2020 at 7:15

dougajmcdonald · Accepted Answer · 2020-07-03 07:14:09Z

1

Your setLink has some funny formatting, you need to use string concatenation (or an alternative) but this below should work

  function setLink() {
    location.href = "?d=" + y[i] + "/" + m[i] + "/" + d[i];
  }

Additionally, there isn't really much point in using a function for the onclick just to call another function you could just do:

  document.getElementById("Timeline-label" + i).onclick = function() {
    location.href = '"?d=" y[i] + "/" + m[i] + "/" + d[i]"';
  };

Finally, if you changed your label to be an a element, you could just get it and set the href attribute directly, rather than needing to create a function at all

answered Jul 3, 2020 at 7:14

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

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

6 Comments

Bubinga Over a year ago

Thank you for the answer. I changed label to a and used document.getElementById("Timeline-label" + i).href = "?d=" + y[i] + "/" + m[i] + "/" + d[i]; It is working but I cant press the a. When I hover over one the correct link appears in the bottom left, but I can't actually click on it.

Bubinga Over a year ago

If I change back to labels and use

document.getElementById("Timeline-label" + i).onclick = function () {location.href = "?d=" + y[i] + "/" + m[i] + "/" + d[i];};

I get localhost:44369/Timeline?d=undefined/undefined/undefined as a url

dougajmcdonald Over a year ago

When I said set the attribute directly I meant with .setAttribute('href', yourValue) which should work

Bubinga Over a year ago

I changed back to a's and I still can't click on it. It seems like I might have to stick to labels

Bubinga Over a year ago

It was a scope problem (duh), I just had to change i = 0 to let i = 0

|

Collectives™ on Stack Overflow

Setting an href on click with a for loop

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related