0

so I need help converting my HTML code to use Bootstrap components.

About the Program

I am making a program that has 26 pictures, each resembling a different letter of the alphabet. Each picture is a button, and when a button is pressed, the designated letter that corresponds with each picture is added to the text located below the pictures. This is meant for the game "The Legend of Zelda: Breath of the Wild" as the game features glyphs that convert to real English letters and are used to form real English sentences.

What I am trying to do

I am trying to make my program aesthetically pleasing by incorporating bootstrap components. So far, I have used the "textarea" tag in my code, as it allows the user to modify the text they have created. When a user presses a button, the corresponding letter of that button is added to the text within the "textarea". I do not know of a substitute for the "textarea" tag that would work for my case, and I checked the Bootstrap documentation to no avail.

Code

var letter;

function choose(choice) {
  document.getElementById('Translation').innerHTML = document.getElementById('Translation').innerHTML + choice;
}
#no button {
  border: none;
  padding: 0;
  background: none;
}
<div id="no">
  <button type="button" onclick="choose('A')">
      <img src="img/A.png" style="width:64px;height:64px;">
    </button>
  <button type="button" onclick="choose('B')">
      <img src="img/B.png" style="width:64px;height:64px;">
    </button>
  <button type="button" onclick="choose('C')">
      <img src="img/C.png" style="width:64px;height:64px;">
    </button>
  <br>
  <textarea id="Translation"> </textarea>
</div>

P.S.

Sorry that the code is not evenly divided into the HTML, CSS, and JS boxes on JSFiddle, but my code isn't working when I divide it. I'm probably doing something wrong, I just got back into coding from a 2-year break.

Alon Eitan
  • 11,997
  • 8
  • 49
  • 58
  • Bootstrap actually has very little relevance to your issue here. Bootstrap gives you a consistent CSS/javascript UI (User Interface) framework and that is it. As you've been out of the loop for a while, I also suggest you look at CSS spriting techniques for your images. Alos look at the jQuery library, which Bootstrap uses, and unobtrusive javascript techniques. – Jon P May 04 '17 at 04:16
  • This question may also be of interest: http://stackoverflow.com/questions/30616925/creating-26-alphabet-letter-buttons-with-the-for-loop-and-string-fromcharcode – Jon P May 04 '17 at 04:24
  • @JacobSnarr Please delete your question if you prefer, but don't just overwrite the content as you did on your last edit – Alon Eitan May 06 '17 at 05:49
  • I don't have the ability to delete it. –  May 06 '17 at 06:24

1 Answers1

1

The text area isn't required at all, you could just as easily use a div. Have a look at selecting all of the buttons and storing them in an array. Within that array, you can add event listeners to them and the event handlers could add the corresponding letters to a single string. For example, imagine this is inside an event handler:

theString += theLetter;
//now update the innerHTML of the <div> with a function call
nfproductions
  • 94
  • 6