Данные массива, ссылка
У меня есть массив
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola" ...... И она выводится по набору букв в поле ввода Как сделать что бы это были ссылки с определёнными стилями Я думал что можно просто var countries = ["<a href="#" style="fon>Afghanistan</a>","a href="#" style="fon>Albania</a>","a href="#" style="fon>Algeria</a>","a href="#" style="fon>Andorra</a>","a href="#" style="fon>Angola</a>" ..... Но оказалось то не работает |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.fon{
background-color: #FF00FF;
margin: 5px;
color: #FFFFFF;
padding: 2px 3px;
border-radius: 3px;
}
</style>
</head>
<body>
<script>
const countries = ["Afghanistan","Albania","Algeria","Andorra","Angola"];
const links = countries.map(text => {const link = document.createElement("a");
Object.assign(link, {text, href : "#", className : "fon"});
return link;
})
document.body.append(...links)
</script>
</body>
</html>
|
У меня вопрос зачем вместо var писать const
И я не до конца подумал когда создавал тему, у меня в адресе ссылки будет реальный адрес, везде разный а не # |
Сергей Ракипов,
по теме https://learn.javascript.ru/modifying-document , что использовать и что изменять зависит только от вас. |
Сергей Ракипов,
ну тогда типа того
<!DOCTYPE html><html><body>
<script>const countries = [{name: "Afghanistan", url: '123'}, {name: "Albania", url: '321'}];
const links = countries.map(el => {const a = document.createElement("a");
Object.assign(a, {text: el.name, href : el.url, className : "fon"});
return a;
})
document.body.append(...links)</script></body>
</html>
|
Цитата:
|
У меня есть задача, и я нашел готовое решение
https://html5css.ru/howto/howto_js_autocomplete.php но нужно что бы вводимые название были ссылками и со стилями. |
Цитата:
Ну если прям в 2х, то: есть массив объектов, через map метод создаётся массив объектов ссылок, а потом аппендится к телу документа. Про точки - это т.н. ES6 SPREAD Operator https://vegibit.com/es6-rest-paramet...ead-operators/
<html><body>
<script>
function sum(...numbers){
document.write(numbers)
}
document.write('sum:<br/>')
sum(1, 2, 3);
document.write('<br/><br/>spread sum:<br/>')
sum(...[1, 2, 3]);
</script></body>
</html>
Если хотите работать - учитесь самообучаться, ну и сёрчить на английском прежде всего. |
Цитата:
|
| Часовой пояс GMT +3, время: 08:34. |