0

I am trying to create button labels based off of user input by inserting a span with the label text via js. The id's of all my buttons are numbers in a sting format so id="0", id="1", etc.

The following function will only label the first button with id="0". 

gearInputs = document.getElementsByClassName('Box');

for (i=0; i<gearInputs.length; i++) {
var gearName = gearInputs[i].value,
  gearButton = document.getElementById(i);
  if(gearName && gearName != ''){
    gearButton.innerHTML = '<span class="resultsButtons">' + gearName +  '</span>';
  }

}

My buttons: 

<button id="0" class="buttonshowHide" onclick="showHide(this.id)"></button>

My input box: 

<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput1"/>

I have also tried i.toString(); with no luck. If I enter 0 as the id in document.getElementById it will label the first button but if i put 1, 2 etc it fails whether I enter it as 1, "1", or i.toString(); where i is 1.

I am sure this is simple and I am just overlooking something.

user881667
  • 165
  • 1
  • 17
  • I think your for loop is incorrect. guess it should be `for (i=0; i – user3525290 May 21 '18 at 01:21
  • I believe the problem is that HTML element id's can't be just a number, but must start with a letter https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. – Steven Lambert May 21 '18 at 01:26
  • 1
    @StevenLambert That's for pre HTML5 and past HTML4 mark up. All it says in the specs of HTML5 that is should be unique and has no space (https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute). A element with ID of number should work just fine. Here is a sample https://jsfiddle.net/k7qu2dxu/ – keysl May 21 '18 at 01:30
  • @keysl Wow, I've been using that for ages now. I didn't know they updated it. Thanks! – Steven Lambert May 21 '18 at 01:34
  • Nothing seems wrong with your code from what I can tell. Could you post a bit of your HTML code, maybe the problems in there somewhere? – Steven Lambert May 21 '18 at 01:58

2 Answers2

0

I'm not sure if I'm reading the question wrong, excuse me if that is the case. It sounds to me like you have html elements like this:

<input class="gearInput" id ="gearInput0" value="test1">
<input class="gearInput" id ="gearInput1" value="test2">
<input class="gearInput" id ="gearInput2" value="test3">

<button class="someClass" id="0"> </button>
<button class="someClass" id="1"> </button>
<button class="someClass" id="2"> </button>

And you are wanting the output of this function to be:

<button class="someClass" id="0"> test1 </button>
<button class="someClass" id="1"> test2 </button>
<button class="someClass" id="2"> test3 </button>

And so on. The array spanHtml is useless, as it always only contains one item, since you clear it in each block of the loop. The gearNames array is also not needed unless you are using it for some other function.

I would do something like this:

gearInputs = document.getElementsByClassName('gearInput');

for (i=0; i < gearInputs.length; i++){
var gearName = gearInputs[i].value,
    gearButton = document.getElementById(i);
    if(gearName && gearName != ''){
    gearButton.innerHTML = '<span class="resultsButtons">' + gearName + '</span>'; 
 }
}

The if block only being to ensure they put a value into the input remove that if you don't care about that.

Heres what that would look like. Hope this helps.

https://jsfiddle.net/edh4131/70v551qp/

edit: spacing

edh4131
  • 60
  • 7
  • First off thanks for the in depth response. I implemented your solution but it is still only working for the first button. Ill edit my first post with the relevant code. – user881667 May 21 '18 at 04:16
  • If you can also put the html or a sample of it, that you are manipulating with the javascript that would be helpful. – edh4131 May 21 '18 at 04:24
  • @user881667 did you look on the fiddle? That works, but if yours doesn't I assume the `gearInputs` array is not correct. If you would like, we can collaborate on your code in jsfiddle and I can show you the correct solution in real time, let me know and I'll drop a collaborate link to my fiddle. – edh4131 May 21 '18 at 04:28
  • @user881667 I updated the fiddle with everything I can think of: https://jsfiddle.net/edh4131/70v551qp/ – edh4131 May 21 '18 at 05:02
  • you have been a huge help. I understand how your example and its very close what I am doing. The end result is exactly what I need. For some reason though when I apply your code to mine it still only works for the very first button. None of the other buttons get labeled. I am creating my input fields dynamically via a drop down selection box. The user can choose how many input fields they need. I am wondering if the problem is there somehow but I don't think so bc the input fields are inserted into the DOM before button label function requests their class or id's. Your example is a big help. – user881667 May 21 '18 at 06:00
  • Ah. If you create the inputs dynamically, you need to do it in the correct way or the newly created id will not be recognized by the browser. Can see how you are creating them? – edh4131 May 21 '18 at 06:06
  • I put the code i am using to create the boxes in this fiddle: https://jsfiddle.net/wyLhe6o6/. Thanks for all the help. Just learning and recently dove into a big project. – user881667 May 21 '18 at 06:38
0

I figured this out. I had to change the button id's from id="0", id="1", etc to id="btn0", id="btn1" etc. After I did that edh4131's solution worked fine.

user881667
  • 165
  • 1
  • 17