Форум

Сергей Ракипов · #1 (**permalink**) 09.03.2020, 09:41

У меня есть массив

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>" .....

Но оказалось то не работает

рони · #2 (**permalink**) 09.03.2020, 10:05

Сообщение от Сергей Ракипов

Как сделать что бы это были ссылки с определёнными стилями

<!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>

Сергей Ракипов · #3 (**permalink**) 09.03.2020, 13:01

У меня вопрос зачем вместо var писать const

И я не до конца подумал когда создавал тему, у меня в адресе ссылки будет реальный адрес, везде разный а не #

рони · #4 (**permalink**) 09.03.2020, 14:02

Сергей Ракипов,
по теме
https://learn.javascript.ru/modifying-document
, что использовать и что изменять зависит только от вас.

FreeStyler · #5 (**permalink**) 11.03.2020, 17:44

Сергей Ракипов,
ну тогда типа того

<!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>

Сергей Ракипов · #6 (**permalink**) 15.03.2020, 15:15

Сообщение от FreeStyler

Сергей Ракипов,
ну тогда типа того

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)

А можете в двух словах объяснить что к чем.

Сергей Ракипов · #7 (**permalink**) 15.03.2020, 15:24

У меня есть задача, и я нашел готовое решение
https://html5css.ru/howto/howto_js_autocomplete.php
но нужно что бы вводимые название были ссылками и со стилями.

FreeStyler · #8 (**permalink**) 25.03.2020, 12:27

Сообщение от Сергей Ракипов

А можете в двух словах объяснить что к чем.

а что конкретно не понятно? Штудируйте учебник для начала https://learn.javascript.ru, но не забудьте так же ES5 и ES6 стандарты глянтуь, ибо в учебнике их вроде нет...
Ну если прям в 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>

Если хотите работать - учитесь самообучаться, ну и сёрчить на английском прежде всего.

Сергей Ракипов · #9 (**permalink**) 25.03.2020, 13:27

Сообщение от FreeStyler

а что конкретно не понятно? Штудируйте учебник для начала https://learn.javascript.ru, но не забудьте так же ES5 и ES6 стандарты глянтуь, ибо в учебнике их вроде нет...
Ну если прям в 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>

Если хотите работать - учитесь самообучаться, ну и сёрчить на английском прежде всего.

Спасибо

Форум

Справочник

Discord чат

Курсы javascript