Как изменить цвет текста ввода пользователя?

Question

Почему здесь не работает id.setAttribute? Я просто пытаюсь изменить цвет текста на клик. 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

В функции priority() внутри функции this является button элементом. Чтобы изменить цвет текста p также (если предположить, что вы имели в виду, когда пользователь вводил текст? Else remove parentNode), вам нужен его родительский элемент через this.parentNode (предполагая, что ваша структура html не изменится).

Также, когда вы вызываете show(), он заменяет innerHTML элемента элементом id, поэтому удаляет обновления цвета. Вы можете изменить это (я удалил его в скрипке, чтобы получить эту работу)

Обновлено функция ниже.

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

скрипка: https://jsfiddle.net/9fauq8qs/26/

Answer 2

Вы пытаетесь вызвать setAttribute по переменной id, а не на элементе.

Предполагая (вы дали мало контекст :) что this является Element объект:

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

Answer 3

Были проблемы с функциями priority() и show() , Следующее должно приблизиться к тому, что вы хотите сделать.

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

См: https://jsfiddle.net/he7nakL2/