html/js

[Swiebertjeee]

I have a problem with retreiving an ID.

I have this on every page in my website :

<div class="agenda">                    <h2> Agenda </h2>                    <a href="agenda.html">                    <table>                            <tr>                                 <td id="day1"></td>                            </tr>                            <tr>                                 <td id="location1"></td>                            </tr>                     </table>                    </a>                    <a href="agenda.html">                        <table>                                <tr>                                     <td id="day2"></td>                                </tr>                                <tr>                                     <td id="location2"></td>                                </tr>                         </table>                    </a>                    <!-- Onderstaande gegeven gebruiken voor uitbreiding! -->                    <!--                    <a href="agenda.html">                            <table>                                <tr>                                     <td id="day3"></td>                                </tr>                                <tr>                                     <td id="location3"></td>                                </tr>                         </table>                    </a>                    <a href="agenda.html">                        <table>                                <tr>                                     <td id="day4"></td>                                </tr>                                <tr>                                     <td id="location4"></td>                                </tr>                         </table>                     </a>                    -->                </div>

It's for the side on every page, the first element :

<tr>                                     <td id="day1"></td>                                </tr>                                <tr>                                     <td id="location1"></td>                                </tr>

works just fine but the second does not work.

 

in another page the second does work but it has this code attached to it (as main article):

If I would remove the main article the second element would also not show on this page .

<div class="homeIntro2">                    <h2><strong>Upcoming Shows</strong></h2>                    <div class="rule">                        <div class="data1">Datum</div>                        <div class="data2">Locatie</div>                        <div class="data3">Plaats</div>                                        </div>                    <div class="ruleX">                        <div class="data1X" id="td-day1"></div>                        <div class="data2X" id="td-event1"></div>                        <div class="data3X" id="td-location1"></div>                                        </div>                    <div class="ruleX">                        <div class="data1X" id="td-day2"></div>                        <div class="data2X" id="td-event2"></div>                        <div class="data3X" id="td-location2"></div>                                        </div>                    <!-- <div class="ruleX">                        <div class="data1X" id="td-day3"></div>                        <div class="data2X" id="td-event3"></div>                        <div class="data3X" id="td-location3"></div>                                        </div>                    <div class="ruleX">                        <div class="data1X" id="td-day4"></div>                        <div class="data2X" id="td-event4"></div>                        <div class="data3X" id="td-location4"></div>                                        </div> -->                    <!-- voor meer evenementen continue reeks vergeet de tour.js niet! -->                </div>

and finally this is my JS that is used:

	var dag1 = "9 April";	var locatie1 = "Hilversum";	var event1 = "Clash of the Coverbands @ RAI";	var dag2 = "0 December";	var locatie2 = "Onbekend";	var event2 = "Battle @ Onbekend";	// var dag3 = "Vul hier de datum in";	// var locatie3 = "Vul hier de locatie in";	// var event3 = "Beschrijving Evenement";	// var dag4 = "Vul hier de datum in";	// var locatie4 = "Vul hier de locatie in";	// var event4 = "Beschrijving Evenement";	document.getElementById("day1").innerHTML = dag1;	document.getElementById("location1").innerHTML = locatie1;	document.getElementById("td-day1").innerHTML = dag1;	document.getElementById("td-location1").innerHTML = locatie1;	document.getElementById("td-event1").innerHTML = event1;	document.getElementById("day2").innerHTML = dag2;	document.getElementById("location2").innerHTML = locatie2;	document.getElementById("td-day2").innerHTML = dag2;	document.getElementById("td-location2").innerHTML = locatie2;	document.getElementById("td-event2").innerHTML = event2;	// document.getElementById("day3").innerHTML = dag3;	// document.getElementById("location3").innerHTML = locatie3	// document.getElementById("td-day3").innerHTML = dag3;	// document.getElementById("td-location3").innerHTML = locatie3;	// document.getElementById("td-event3").innerHTML = event3;	// document.getElementById("day4").innerHTML = dag4;	// document.getElementById("location4").innerHTML = locatie4;	// document.getElementById("td-day4").innerHTML = dag4;	// document.getElementById("td-location4").innerHTML = locatie4;	// document.getElementById("td-event4").innerHTML = event4;	// Voor meer kan je de reeks doorgaan zoals hierboven is gedaan vergeet niet agenda.html

[laxer]

Not sure I understand your question...

 

It is working for me... https://jsfiddle.net/131bch7f/

[Swiebertjeee]

Not sure I understand your question...

 

It is working for me... https://jsfiddle.net/131bch7f/

If you take out the content in homeintro2 you'll see that some part of the agenda is not working anymore

[Swiebertjeee]

I found out this part of the code is caussing the error: (disabling would fix it but I dont want to disable it ofcourse)

document.getElementById("td-day1").innerHTML = dag1;	document.getElementById("td-location1").innerHTML = locatie1;	document.getElementById("td-event1").innerHTML = event1;

[laxer]

That's because the getElementsByIds fail to find the item and it throws an error thus stopping the script

 

Either throw a try/catch around it: http://www.w3schools.com/js/js_errors.asp

 

or check to see if it was found before trying to change it. (Make a var with the element, check to see if it is null, if it is not change the innerHTML)