Add element using JS depending on select

Question

Good day.
It is necessary that depending on the selected select text is added after the next input field.
For example: if I chose Россия in select , then after input руб added, I chose the США - a долл added долл and so on.

There is a code, but, as you understand, it does not work:

 function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } function createText() { var selectValue = document.getElementById("money").value; var CashInput = document.getElementById("cash"); var temp = document.createElement("p"); if (selectValue == "rub") { var text = "rub"; temp.appendChild(text); insertAfter(CashInput, temp); } }

 <select id="money" onchange="createText();"> <option value="rub">Russia</option> <option value="doll">USA</option> </select> <input id="cash">

user207618 · Answer 1 · 2016-04-17T02:19:38

 // Забудьте уже DOM Event Level 0 Inline! Т.е. вставку обработчиков в HTML - onclick='бла-бла-бла' let data = { id: { SELECT: '#money', INPUT: '#cash', PRICE: '#price', SIGN: '#sign' }, value: { rub: "руб", usd: '$' } }; document.addEventListener('DOMContentLoaded', e => { // Ждём загрузки DOM, чтобы найти элементы let select = document.querySelector(data.id.SELECT), input = document.querySelector(data.id.INPUT); select.addEventListener('change', signHandler); input.addEventListener('keyup', priceHandler); signHandler.call(select); // Сразу выберем знак priceHandler.call(input); // И значение }); function signHandler(){ document.querySelector(data.id.SIGN).textContent = data.value[this.selectedOptions[0].value]; } function priceHandler(){ let price = this.value === '' ? '0' : this.value; document.querySelector(data.id.PRICE).textContent = price; }

 <select id="money"> <option value="rub">Russia</option> <option value="usd">USA</option> </select> <input id="cash" value='0'><br /> <span><span id='price'></span> <span id='sign'></span</span>

Your code doesn't work because appendChild only accepts Node , and the string is passed.

Sorry, maybe I don’t understand something, but inline handlers unload the page, VK operates on this principle, part of Yandex applications, several handlers hang on Facebook and depending on the data attributes of target-y various actions are performed, that is, everyone is trying unload the number of events per page.
and for example, until today, a 100% way to track that the picture did not load is to write it inline onerror.
@sivik_xes They are solely due to the fact that this is the very first way to implement the Observer (i.e., the above sites just want their ancient IE to work and more people were. Or just their code was written in antiquity when it was only a way, and now nobody is updating them (though it would be worth it)).
They have no advantages in comparison with new addEventListener .
Well, except that I looked in HTML and immediately saw all the handlers.
And yes - the inline way is old and does not unload anything, the new way will be more optimized.
Well, in terms of optimization, I mean that initially after loading the page addEventListener writes down handlers that hang constantly, it doesn't matter if the user performed the action or not, every time it is checked whether the action took place on the element, and the inline handlers are initialized right at the action itself, and Do not hang in the memory.
the only thing addEventListener is good at is that you can hang several identical handlers on the same element.

Answer 2 · 2016-04-16T21:59:18

Implementation with jQuery

Added an example of implementation without jquery as the author is fundamentally

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="money" onchange="$('.info-div').text($(this).val());"> <option value="rub">Russia</option> <option value="doll">USA</option> </select> <input id="cash"> <div class="info-div" style="display:inline-block">rub</div> <hr> <select id="money" onchange="document.querySelector('.info-div-no-jquery').innerHTML = this.value;"> <option value="rub">Russia</option> <option value="doll">USA</option> </select> <input id="cash"> <div class="info-div-no-jquery" style="display:inline-block">rub</div>

and where did you find the jQuery mention in the question or tags to it?

Add element using JS depending on select

2 answers 2

More articles: