Укажите строку на основе значения prompt()?

Question

У меня есть следующий фрагмент кода:

var max = prompt(""); 
var selector = '#list > listitem > label[value=max]'; 
var node = document.querySelector(selector); 
node.click(); 

Я хочу, чтобы установить в selector строку, основанную на входном значении max.

Answer 1

Если вы имеете в виду вы хотите использовать значение переменной max в селекторе, использование конкатенации строк (и поставить кавычки вокруг него):

var max = prompt(""); 
var selector = '#list > listitem > label[value="' + max + '"]'; 
var node = document.querySelector(selector); 

Две разные вещи там происходит:

1. Мы используем конкатенацию строк, чтобы поставить значение из max в строку.

2. Полностью не связанный с этим, мы также помещаем это значение в кавычки в селекторе, чтобы пробелы или некоторые другие символы не взорвали селектор. [value=foo] - допустимый селектор соответствия атрибутов, но [value=foo bar] нет. [value="foo bar"] есть. Хотя значение значения в кавычках не решит все (особенно, если пользователь набирает ", у вас проблемы), но он, по крайней мере, будет обрабатывать пробелы.

---

Или, если вы используете ES2015 (ака "ES6"), вы можете использовать шаблон строки:

// ES2015 only! 
var max = prompt(""); 
var selector = `#list > listitem > label[value="${max}"]`; 
var node = document.querySelector(selector); 

---

Заметим, однако, что value является not a valid attribute for label elements. Поля формы имеют value, а не ярлыки.