Javascript-форум - Взять две переменные из двух выпадающих списков и вывести их в input

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Взять две переменные из двух выпадающих списков и вывести их в input (https://javascript.ru/forum/misc/49280-vzyat-dve-peremennye-iz-dvukh-vypadayushhikh-spiskov-i-vyvesti-ikh-v-input.html)

Взять две переменные из двух выпадающих списков и вывести их в input

Здравствуйте. Есть два значения name и name1. Как сделать чтобы в поле input вывелось name пробел name1? Просто сложить их вот так калькулятором не удалось:help: Где ошибка и почему?

function calculat() {
	
	var name2 = name + name1;
	
	document.getElementById("name + name1").value=v2;
};

<select onchange="changeSel(this);">
<option value='1'></option>
<option value="2">Mersedes</option>
 </select>

<select onchange="changeSel1(this);">
  <option value="1">S-Class</option>
  <option value="2">Sprinter</option>
  
</select>

</br>
</br>

<input type="text" name="" id="name2" value="">

<script type='text/javascript'>
function changeSel(el){
var v, n;
n=el.selectedIndex;
v=el[n].text;
document.getElementById("name").value=v;
};
function changeSel1(el){
var v1, n1;
n1=el.selectedIndex;
v1=el[n1].text;
document.getElementById("name1").value=v1;
};
</script>

Чувааак, подучи JS, я запутался в логике кода, тут наркомания какая-то))

//сложение с пробелом
document.querySelector('#name2').value = name + ' ' + name1;

я понимаю, что я не грамотный в яваскрипте, но хочу разобраться как это работает)). За основу был взят код с какого-то сайта.
Я правильно понимаю, что document.querySelector нужно заносить в onclick поля?

Kolko,
а тебе именно по клику надо?

Вот пример по клику:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<input type="text" id="my-id" onclick="calculat()">
</body>
<script>

  function calculat() {

    var name = 'значение';
    var name1 = 'значение1';

    document.querySelector('#my-id').value = name + ' ' + name1;

  }


</script>
</html>

Цитата:

Сообщение от Safort (Сообщение 324488)

Kolko,
а тебе именно по клику надо?

да, т.е. когда выбрал значение из списка и нажал Mersedes и, например, Sprinter, то в my-id заносится Mersedes Sprinter и немедленно отображается в input.
Благодарю, что помогаете.
Но почему когда мы складываем функцией calculat значение name и name1 они не складываются? Их как будто не существует:) Вот весь мой код:

<select onchange="changeSel(this);">
<option value='1'></option>
<option value="2">Mersedes</option>
 </select>

<select onchange="changeSel1(this);">
  <option value="1">S-Class</option>
  <option value="2">Sprinter</option>
  
</select>

</br>
</br>

<input type="text" id="my-id" onclick="calculat()">


<script type='text/javascript'>
function changeSel(el){
var v, n;
n=el.selectedIndex;
v=el[n].text;
document.getElementById("name").value=v;
};
function changeSel1(el){
var v1, n1;
n1=el.selectedIndex;
v1=el[n1].text;
document.getElementById("name1").value=v1;
};
function calculat() {
var name = 'name';
var name1 = 'name1';
document.querySelector('#my-id').value = name + ' ' + name1;
};
</script>

Kolko,

Цитата:

Но почему когда мы складываем функцией calculat значение name и name1 они не складываются? Их как будто не существует

Проверил у себя этот код и как раз таки calculat это единственное, что работает.

А вот эта часть вообще не понятна для чего

document.getElementById("name").value=v;

Ведь у тебя нет элемента с id = name

Кароч, вот код:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<select onchange="changeSel();">
  <option value="2">Mersedes</option>
  <option value='1'></option>
</select>
 
<select onchange="changeSel();">
  <option value="1">S-Class</option>
  <option value="2">Sprinter</option>
</select>
 
</br>
</br>
 
<input type="text" id="my-id" onclick="calculat()">

<script type='text/javascript'>

  function changeSel() {

    var selects = document.querySelectorAll('select');
    var el1 = selects[0].selectedIndex;
    var el2 = selects[1].selectedIndex;

    document.querySelector('#my-id').value = selects[0].options[el1].text +
                                             ' ' + 
                                             selects[1].options[el2].text;
  }

</script>
</body>
</html>

Kolko, так еще можно:

<select id="marka" onchange="changeSel()">
	<option value="">----------</option>
	<option value="Mersedes">Mersedes</option>
</select>
<select id="model" onchange="changeSel()">
	<option value="">----------</option>
	<option value="S-Class">S-Class</option>
	<option value="Sprinter">Sprinter</option>
</select>
</br></br>
<input type="text" id="auto">

<script>
function changeSel() {
	if (marka.value) {
		auto.value = marka.value + ' ' + model.value;
	} else {
		model.selectedIndex = 0;
		auto.value = '';
	}
}
</script>

блин, это чертовски круто работает!!!:victory:
Safort, Rise,
респект!