Adding block of HTML with javascript - string error

Question

I'm trying to create a keyboard with characters that will add the pressed character to the input box. I created a function which I call with the onClick event and pass the character to be added. The problem is, the browser is interpreting it wrong due to the quotes within quotes. How can I format it so there isn't an issue with opening the parameter with double and closing with single quotes?

Here's the function:

function showKeyboard(){
    var keyboardHtml = "<div class='keyboard'>" +
                    "<a class='char-button' onClick='addChar('à'); return false'>à</a>" +
                    "<a class='char-button' onClick='addChar('â'); return false'>â</a>" +
                    "<a class='char-button' onClick='addChar('ç'); return false'>ç</a>" +
                    "<a class='char-button' onClick='addChar('è'); return false'>è</a>" +
                    "<a class='char-button' onClick='addChar('é'); return false'>é</a>" +
                    "<a class='char-button' onClick='addChar('ê'); return false'>ê</a>" +
                    "<a class='char-button' onClick='addChar('ë'); return false'>ë</a>" +
                    "</div>";
    var element = document.getElementById("quiz");
    element.innerHTML += keyboardHtml;
}

Here's how the browser (Chrome) sees it:

The error lies within the quotes in the onclick event. By the way, the reason I'm doing it like this is because I only want to show the keyboard in certain instances (textbox questions that require the characters, not multiple choice ones).

If anyone has a fix or a more efficient way, I'd love to hear it.

`onClick='addChar('à')'` Take a care look at the quoting, does it look valid? — Teemu, Aug 03 '17 at 08:31
I didn't think this would be a problem: onClick='addChar('à'); return false' I thought if I used double quotes for the string, everything inside had to be exclusively single quotes. — , Aug 03 '17 at 08:33
No, everything inside must still be valid, quoted or not. You wouldn't write this directly on a HTML tag, wouldn't you? — Teemu, Aug 03 '17 at 08:37
The double quotes are being recognised by JavaScript, but, once the string is parsed to HTML, the onClick value is being ended when the second single quote is reached. — Matthew Lewis, Aug 03 '17 at 08:38
I wrote a small fiddle for this, but as the question is now closed I can't comment. I hope this is of some help: https://jsfiddle.net/38yn05g5/ — Matthew Lewis, Aug 03 '17 at 09:27

Nandan Bhat · Answer 1 · 2017-08-03T08:42:53.967

Use \.

function showKeyboard(){
    var keyboardHtml = "<div class='keyboard'>" +
                    "<a class='char-button' onClick=\"addChar('à'); return false\">à</a>" +
                    "<a class='char-button' onClick=\"addChar('â'); return false\">â</a>" +
                    "<a class='char-button' onClick=\"addChar('ç'); return false\">ç</a>" +
                    "<a class='char-button' onClick=\"addChar('è'); return false\">è</a>" +
                    "<a class='char-button' onClick=\"addChar('é'); return false\">é</a>" +
                    "<a class='char-button' onClick=\"addChar('ê'); return false\">ê</a>" +
                    "<a class='char-button' onClick=\"addChar('ë'); return false\">ë</a>" +
                    "</div>";
    var element = document.getElementById("quiz");
    element.innerHTML += keyboardHtml;
}

@Quentin I have updated my answer. Don't you think that should work ? — Nandan Bhat, Aug 03 '17 at 08:43

score 0 · Answer 2 · answered Aug 03 '17 at 08:46

You need to work with functions and flow controls. You have lots of duplicate code. If you have to repeat a given set of statements, please use a loop.

You can create elements with strings in javascript, but I advise to not do that. Javascript has functionalities to help you to create elements. Please use them.

function addChar(char) {
    console.log(char);
}

function showKeyboard(){
    var specialChars = ['à', 'á','é', 'è']; // your list of special characters 
    
    var div = document.createElement('div'); // creates a <div> element
    
    // loops through the specialCharacter array and for each character
    specialChars.forEach(function(char){
      var a = document.createElement('a'); // 1. create <a> element
      a.className = 'char-button'; // 2. give it class name "char-button"
      a.onclick = function(event) { // 3. listen to "onclick" event (better alternative: addEventListener)
        event.preventDefault(); // 3.a. gets executed if link got clicked -> prevent bubbling
        addChar(char); // 3.b. call function to add the given char
      };
      a.textContent = char; // 4. add char to textContent for view
      div.appendChild(a); // add anchor to the div.
    });
    
    document.getElementById("quiz").appendChild(div); // add just created div to the HTML
}

showKeyboard();

a.char-button {
  margin: 0 0.4em;
}

<div id="quiz">

</div>

wayzz · Answer 3 · 2017-08-03T08:45:42.560

Escape double quotes within the Javascript value using \.

function showKeyboard(){
    var keyboardHtml = "<div class='keyboard'>" +
                    "<a class='char-button' onClick=\"addChar('à'); return false\">à</a>" +
                    "<a class='char-button' onClick=\"addChar('â'); return false\">â</a>" +
                    "<a class='char-button' onClick=\"addChar('ç'); return false\">ç</a>" +
                    "<a class='char-button' onClick=\"addChar('è'); return false\">è</a>" +
                    "<a class='char-button' onClick=\"addChar('é'); return false'>é</a>" +
                    "<a class='char-button' onClick=\"addChar('ê'); return false\">ê</a>" +
                    "<a class='char-button' onClick=\"addChar('ë'); return false\">ë</a>" +
                    "</div>";
    var element = document.getElementById("quiz");
    element.innerHTML += keyboardHtml;
}

This should work.

A slash is not an escape character in HTML. It will not help at all when you want use a `'` character in the value of an HTML attribute value delimited with `'` characters. In fact, it will be consumed by the JS parser resulting in **exactly the same string**! — Quentin, Aug 03 '17 at 08:34
@Quentin you are right. I have edit my answer to give a clearer example. — wayzz, Aug 03 '17 at 09:23

Adding block of HTML with javascript - string error

3 Answers3