Failed to execute query selector op de document-id is niet geldig kiezen

Ik proberen om een manier te creëren voor het bewerken van een bos van opmerkingen en identificeren ze met een id die ik kan leveren. De fouten die ik heb is dat er sprake is van:

SyntaxError: Failed to execute ‘querySelector’ op ‘Document’: ‘#1234’ is geen geldige kiezen. Echter, ik zie niet in hoe dit is mogelijk omdat ik duidelijk heb id=1234 in de <p>.

Daarnaast zijn er zaken waar ik alles anders doen en een waarschuwing(id), dit werkt niet voor de tweede vorm en de fout is dat:

TypeError: kan Niet lezen eigenschap ‘classList’ null.

Hier is het in jfiddle: https://jsfiddle.net/wafqgq0L/2/

JS:

document.querySelector('.editable').addEventListener('click', function(event) {
 var index = event.target.id.indexOf('_');

 var id = event.target.id.substring(0,index);
	
	//actual data
	document.querySelector('#'+id).classList.add('hidden');
  
  //edit button
  document.querySelector("#"+id+"_edit").classList.add('hidden');
  
  //textarea
	document.querySelector("#"+id+"_editable").classList.remove('hidden');
  
  //save button
	document.querySelector("#"+id+"_save").classList.remove('hidden');

});

CSS:

.hidden {
  display: none;
}

HTML:

//all id will be like 12345_comment

<div class="editable">
<p id="1234">
  Some comment
</p>

<form action="form.php" method="post">
  <textarea id="1234_editable" class="hidden">Some comment</textarea>
  <a href="#" id="1234_edit">Edit</a>
  <a href="#" id="1234_save" class="hidden">Save</a>
</form>
</div>
<br><br>
<div class="editable">
<p id="123">
  Some comment
</p>

<form class="editable" action="form.php" method="post">
  <textarea id="123_editable" class="hidden">Some comment</textarea>
  <a href="#" id="123_edit">Edit</a>
  <a href="#" id="123_save" class="hidden">Save</a>
</form>
</div>

  • Als met behulp van HTML4 ids moet beginnen met een letter (w3.org/TR/html4/types.html#type-id) met HTML5 kunt u gebruik maken van getallen. Wijzig uw ids om te beginnen met een letter of gebruik maken van HTML5
  • Is er een reden dan ook geen gebruik van JQuery? het maakt DOM manipulaties van deze veel makkelijker (en met meer beknopte syntaxis)
  • Begrijp niet waarom je dit niet gebruikt getElementById
InformationsquelleAutor | 2016-01-13



4 Replies
  1. 2

    Je zou kunnen vinden jQuery makkelijker, en het is automatisch cross-browser (en sneller te typen!) Want het is getagd op uw vraag, hier is de jQuery oplossing:

    jsFiddle Demo

    $('[id^=edit_]').click(function(){
        var id = this.id.split('_')[1];
        $('#'+id).addClass('hidden');
        $('#edit_'+id).addClass('hidden');
    
        $('#save_'+id).removeClass('hidden');  
        $('#editable_'+id).removeClass('hidden');  
    });
    
    $('[id^=save_]').click(function(){
        var id = this.id.split('_')[1];
        $('#'+id).removeClass('hidden');
        $('#edit_'+id).removeClass('hidden');
    
        $('#save_'+id).addClass('hidden');  
        $('#editable_'+id).addClass('hidden');  
    });

    Opmerking dat ik overgestapt rond de id_number en de idName_ voorvoegsel. Dit maakt het veel gemakkelijker is om te richten op die elementen met behulp van de starts with selector: id^=

    • Dit is geweldig. Bedankt. Weet je als ik een post-aanvraag na het Opslaan wordt geklikt?
    • Wat je zoekt is een zogenaamde AJAX – en wees niet bang, het is veel makkelijker dan het klinkt. Zie dit bericht en dit antwoord voor een snelle invoering, en zoals altijd op StackOverflow, neem dan upvote alle berichten die u nuttig vindt.
    • Dat is een oplossing bieden, maar niet uitlegt waarom document.querySelector('#000') doet het gooien van een fout tijdens document.querySelector('[id="000"]') haalt het element net als document.getElementById('000') doet…
  2. 12

    Als met behulp van HTML4 ids moet beginnen met een letter (https://www.w3.org/TR/html4/types.html#type-id)

    Als met behulp van HTML5 kunt u gebruik maken van getallen.

    Wijzig uw ids om te beginnen met een letter (als in id="p12345") of gebruik maken van HTML5
    (d.w.z. het gebruik van <!DOCTYPE html> op de top van uw document)

  3. 4

    Kunt u gebruik maken van sjabloon letterlijke voor, omdat id moet tussen aanhalingstekens staan anders werkt het niet en zorg ervoor dat het gebruik van HTML5 aan de bovenkant van het document. Met dit wilde ik niet nog meer problemen.

    Bijvoorbeeld:

    document.querySelector(`[data-id="${id}" ]`);

    Of als om welke reden u niet wilt gebruiken sjabloon letters voeg deze regel code:

    document.querySelector("[data-id=" + "\'" + id + "\'" + "]");

    Met het escape-teken \' in dubbele aanhalingstekens.

    Hoop dat dit helpt.

  4. 1

    document.querySelector("class or id") is niet het gebruik van tags als argumenten in plaats daarvan gebruikt class of Id.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *