-1

I am currently building a small text adventure, however I have multiple span elements with the same id.

This way, I use the document.getElementById('id').onclick in JavaScript, they're all affected. Or so I thought.

Apparently, this only works with the first span.

How can I make this work?

function examineArea() {
    document.getElementById('game_text').innerHTML='You are sitting at the end of a long table. A feast is laid, and the <span id="baronBattenhillButton">Baron</span> tells you to eat as much as you want, as will he.<br/>There are mounted heads hanging from the wall. You wonder if the <span id="baronBattenhillButton">Baron</span> had hunted them himself.<br/><br/><br/>Sitting on the other side of the table is <span id="baronBattenhillButton">Baron Battenhill</span> himself. There are <span id="baronsGuardButton"/>guards</span> on both his right and his left side.<br/>The <span id="baronsGuardButton"/>Baron</span> has a worried look on his face.';
    document.getElementById('baronBattenhillButton').onclick=examineBaronBattenhill;
}
Alex K.
  • 171,639
  • 30
  • 264
  • 288
Aerkhanite
  • 9
  • 1
    "when I have multiple span elements with the same id" — That's not allowed. Start with real HTML. – Quentin Mar 11 '14 at 14:03
  • If getElementById() returned more than one element, it would return something Array-like and setting the innerHTML of such wouldn't work anyway. Once you have cleaned your approach up you will have to loop through your selected elements and set the innerHTML of each. – Peter Herdenborg Mar 11 '14 at 14:08
  • @Quentin I realize that, but classes doesn't work for me. – Aerkhanite Mar 11 '14 at 14:10
  • @PeterHerdenborg could you elaborate? I am just starting on JS, and this is my first project. – Aerkhanite Mar 11 '14 at 14:10
  • If you want to group multiple elements together give them all a `class` in common then; [How to getElementByClass instead of GetElementById with Javascript?](http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript) – Alex K. Mar 11 '14 at 14:10
  • @Aerkhanite — IDs don't work for you either. Figure out how to make classes work for you. – Quentin Mar 11 '14 at 14:18

2 Answers2

0

You cannot have mutiple same ids
Ids are unigue.
You can add a class to each span
and onclick event

Try

<span class="baronBattenhillButton" onclick="examineBaronBattenhill;">Baron</span>



 function examineArea() {
        document.getElementById('game_text').innerHTML='You are sitting at the end of a long table. A feast is laid, and the <span class="baronBattenhillButton" onclick="examineBaronBattenhill">Baron</span>';
}

and so on for the other span

UPDATE

If you want to keep the id just add different ids to each span.

Try:

<span id="baronBattenhillButton1" onclick="examineBaronBattenhill;">Baron</span>
<span id="baronBattenhillButton2" onclick="examineBaronBattenhill;">Baron</span>

and so on

laaposto
  • 11,835
  • 15
  • 54
  • 71
  • If you want to keep the id then you must put in each span a different id – laaposto Mar 11 '14 at 14:14
  • Onclick doesn't work for me when I use it in the span, it tells me it isn't defined, I guess I have to have multiple id's then, although it'll get very irritating to have 20 different ids of the same thing. – Aerkhanite Mar 11 '14 at 14:19
0

Use different id's but same name to achieve this. Then you use document.getElementsByName() to retreive the elements

function examineArea() {
    document.getElementById('game_text').innerHTML = 'You are sitting at the end of a long table. A feast is laid, and the <span name="baronBattenhillButton">Baron</span> tells you to eat as much as you want, as will he.<br/>There are mounted heads hanging from the wall. You wonder if the <span name="baronBattenhillButton">Baron</span> had hunted them himself.<br/><br/><br/>Sitting on the other side of the table is <span name="baronBattenhillButton">Baron Battenhill</span> himself. There are <span id="baronsGuardButton"/>guards</span> on both his right and his left side.<br/>The <span id="baronsGuardButton"/>Baron</span> has a worried look on his face.';

    var nodeList = document.getElementsByName("baronBattenhillButton");

    for (var i = 0; i < nodeList.length; i++) {
        nodeList[i].onclick = examineBaronBattenhill;
    }
}
Johan
  • 1,016
  • 7
  • 13