Wie ändere ich die Farbe des Benutzereingabetexts?

Question

Warum funktioniert id.setAttribute hier nicht? Ich versuche nur, die Farbe des Textes mit einem Klick zu ändern. https://jsfiddle.net/9fauq8qs/

function priority() { 
    var id = this.getAttribute('id'); 
    var todos = get_todos(); 
    id.setAttribute("style", "color:red"); 

    localStorage.setItem('todo', JSON.stringify(todos)); 

    show(); 

    return false; 
} 

Answer 1

In der Funktion priority() innerhalb der Funktion this ist button Element. Um auch die Textfarbe des p zu ändern (vorausgesetzt, dass Sie das mit dem Benutzereingabentext meinten? Else remove parentNode), benötigen Sie sein Elternelement über this.parentNode (vorausgesetzt, Ihre HTML-Struktur bleibt gleich).

Auch wenn Sie show() aufrufen, ersetzt es die innerHTML des Elements mit ID-Element und damit die Farbaktualisierungen entfernt. Vielleicht möchten Sie, dass ändern (ich es in der Geige entfernt diese Funktion zu erhalten)

aktualisiert die Funktion unten.

function priority() { 
    var todos = get_todos(); 
    this.parentNode.setAttribute("style", "color: red"); 
    localStorage.setItem('todo', JSON.stringify(todos)); 
    return false; 
} 

Geige: https://jsfiddle.net/9fauq8qs/26/

Answer 2

Sie versuchen setAttribute auf der id Variable zu nennen, nicht auf das Element.

Angenommen (Sie gab wenig Kontext :) dass this ist ein Element Objekt:

this.setAttribute('style', 'color: red') 

Answer 3

Es gab Probleme mit den priority() und show() Funktionen . Das Folgende sollte Ihnen näher bringen, was Sie tun möchten.

function priority() { 
    var id = this.getAttribute('value'); 
    var todos = get_todos(); 

    localStorage.setItem('todo', JSON.stringify(todos)); 
    document.getElementById(id).style.color = "red"; 

    return false; 
} 

function show() { 
    var todos = get_todos(); 

    var html = '<p>'; 
    for (var i = 0; i < todos.length; i++) { 
    html += "<p id='item" + i + "'>" + todos[i] + "<button class='remove'>x</button></li><button class='priority' value='item" + i + "'>Priority</button></li>"; 
    }; 

See: https://jsfiddle.net/he7nakL2/