Question

我试图创建一个带有字符的键盘，将按下的字符添加到输入框中。我创建了一个函数，我用onClick事件调用它并传递要添加的字符。问题是，由于引号内的引号，浏览器正在解释它。如何设置格式，以便在使用double打开参数并使用单引号关闭时不会出现问题？

这里的功能是：

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;
}

以下是浏览器（Chrome）的看法：

错误位于onclick事件的引号内。顺便说一下，我这样做的原因是因为我只想在某些情况下显示键盘（需要字符的文本框问题，而不是多项选择）。

如果有人有修复或更有效的方式，我很乐意听到它。

Answer 1

使用\。

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;
}

Answer 2

您需要使用函数和流控件。你有很多重复的代码。如果你必须重复一组给定的陈述，请使用循环。

您可以使用javascript中的字符串创建元素，但我建议不要这样做。 Javascript具有帮助您创建元素的功能。请使用它们。

＆＃13;

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();

＆＃13;

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

＆＃13;

<div id="quiz">

</div>

＆＃13;

Answer 3

使用\在Javascript值中转义双引号。

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;
}

这应该有用。

使用javascript添加HTML块 - 字符串错误

3 个答案: