Question

此刻我的报价情况非常糟糕。我在innerHTML内部工作，我想在onClick-Event上调用一个函数，它给我留下了以下内容：

modalEl.innerHTML = '<form>'+
     '<legend>Gruppe bearbeiten</legend>'+
     '<div class="mui-textfield">'+
        '<input id="groupName" type="text" value="'+name+'">'+
        '<label>Gruppenname</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
        '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
        '<label>Beschreibung</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
     '<label>Geräte hinzufügen</label>'+
     '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
     '<option value="0"></option>'+
     '</select>'+
      '</div>'+
      '<br>'+
      '<div class="outterformbuttons">'+
         '<div class="formbuttons">'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById(&quot;groupName&quot;).value, document.getElementById(&quot;groupDesc&quot;).value)">Speichern</button>'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
          '</div>'+
      '</div>'+
  '</form>';

我已经尝试转义引号并使用HTML-Quotes，但都没有奏效。

Answer 1

而不是HTML编码单引号，只是JavaString转义单引号。

'<button type="button" class="mui-btn mui-btn--raised"
  onclick="sendUpdatedGroup(id, document.getElementById(\'groupName\').value,
  document.getElementById(\'groupDesc\').value)">Speichern</button>'+

如果你不想逃离地狱，不要使用事件处理程序作为HTML属性（我们大约10年前停止了这样做）。

modalEl.innerHTML = '<form>'+
 '<legend>Gruppe bearbeiten</legend>'+
 '<div class="mui-textfield">'+
    '<input id="groupName" type="text" value="'+name+'">'+
    '<label>Gruppenname</label>'+
 '</div>'+                                        
 '<br/>'+
 '<div class="mui-textfield">'+
    '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
    '<label>Beschreibung</label>'+
 '</div>'+                                        
 '<br/>'+
 '<div class="mui-textfield">'+
 '<label>Geräte hinzufügen</label>'+
 '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
 '<option value="0"></option>'+
 '</select>'+
  '</div>'+
  '<br>'+
  '<div class="outterformbuttons">'+
     '<div class="formbuttons">'+
         '<button type="button" class="mui-btn mui-btn--raised" >Speichern</button>'+
         '<button type="button" class="mui-btn mui-btn--raised">Abbrechen</button>'+
      '</div>'+
  '</div>'+
'</form>';

 var buttons = modalEl.querySelectorAll('.formbuttons button');
 buttons[0].addEventListener('click', function() {
   sendUpdatedGroup(id, 
       document.getElementById('groupName').value,
       document.getElementById('groupDesc').value))
 });
 buttons[i].addEventListener('click', deactivateOverlay);

Answer 2

您忘了声明desc和name看这个小提琴完全有效https://jsfiddle.net/L3Lfweh9/

HTML

<div id="message">

</div>

<button id="bttn">
click here
</button>

JS

var name = "one";
var desc = "two";
var text = '<form>'+
     '<legend>Gruppe bearbeiten</legend>'+
     '<div class="mui-textfield">'+
        '<input id="groupName" type="text" value="'+name+'">'+
        '<label>Gruppenname</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
        '<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
        '<label>Beschreibung</label>'+
     '</div>'+                                        
     '<br/>'+
     '<div class="mui-textfield">'+
     '<label>Geräte hinzufügen</label>'+
     '<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
     '<option value="0"></option>'+
     '</select>'+
      '</div>'+
      '<br>'+
      '<div class="outterformbuttons">'+
         '<div class="formbuttons">'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById(&quot;groupName&quot;).value, document.getElementById(&quot;groupDesc&quot;).value)">Speichern</button>'+
             '<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
          '</div>'+
      '</div>'+
  '</form>';

  document.getElementById("bttn").addEventListener("click", function(){
    document.getElementById("message").innerHTML = text;
  }, false);

转义引号在JavaScript innerHTML中不起作用

2 个答案: