How do I replace the value of a variable from the same H1 element in javascript?

Question

In my webpage, I have a dropdown selection where every time an item from the list is selected, it becomes the first-child of that list. From there, an H1 element is created, where this first-child (stored in the variable 'drink') is added to the H1 element, reading "drink.text()? Great Choice." However, when the user wants to change their selection, changing the first-child of the list, I want to change the variable 'drink' from the same original H1.

Code:

 console.clear(); var el = {}; $('.placeholder').on('click', function(ev) { $('.placeholder').css('opacity', '0'); $('.list__ul').toggle(); }); $('.list__ul a').on('click', function(ev) { ev.preventDefault(); var index = $(this).parent().index(); $('.placeholder').text($(this).text()).css('opacity', '1'); console.log($('.list__ul').find('li').eq(index).html()); $('.list__ul').find('li').eq(index).prependTo('.list__ul'); $('.list__ul').toggle(); var drink = $('.list__ul li:first-child'); var h = document.createElement("H1"); h.classList.add("dranks"); var t = document.createTextNode(drink.text() + '? Great Choice.'); h.appendChild(t); document.body.appendChild(h); $(".dranks").html(drink.text() + '? Great Choice.'); }); $('select').on('change', function(e) { // Set text on placeholder hidden element $('.placeholder').text(this.value); // Animate select width as placeholder $(this).animate({ width: $('.placeholder').width() + 'px' }); }); 

 .typo, .list a { font-size: 55px; font-weight: 700; font-family: 'Source Sans Pro', sans-serif; color: #202530; text-decoration: none; letter-spacing: 0em; text-transform: lowercase; } .typo option, .list a option { font-size: 55px; } .transition { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .wrapper { padding-top: 150px; height: 100vh; font-size: 55px; } .list { display: inline-block; position: relative; margin-left: 6px; } .list ul { text-align: left; position: absolute; padding: 0; top: 0; left: 0; display: none; letter-spacing: 0.05em; } .list ul .active { display: block; } .list li { list-style: none; padding-top: 3px; } .list li:first-child a { color: #e5b78e; } .list a { -webkit-transition: all .4s; transition: all .4s; color: #e5b78e; position: relative; } .list a:after { position: absolute; content: ''; height: 5px; width: 0; left: 0; background: #dea26e; bottom: 0; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .list a:hover { cursor: pointer; color: #dea26e; } .list a:hover:after { width: 100%; } select { display: inline; border: 0; width: auto; margin-left: 10px; outline: none; -webkit-appearance: none; -moz-appearance: none; border-bottom: 2px solid #555; color: #e5b78e; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } select:hover { cursor: pointer; } select option { border: 0; border-bottom: 1px solid #e5b78e; padding: 10px; -webkit-appearance: none; -moz-appearance: none; } .placeholder { border-bottom: 4px solid; cursor: pointer; letter-spacing: 0em; color: #202530; } .placeholder:hover { color: #e5b78e; } .dranks { position: absolute; z-index: 2; font-family: arial; font-weight: bold; font-size: 50px; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper typo">today i'm feeling like a <div class="list"><span class="placeholder">select</span> <ul class="list__ul"> <li><a href="">Flat White</a></li> <li><a href="">Long Black</a></li> <li><a href="">Cappuccino</a></li> <li><a href="">Mochaccino</a></li> </ul> </div> </div> 

As you can see from my attempt, I have managed to do this somewhat, but I feel this is definitely not the correct way to do this. Any help on a solution would be appreciated.

Answer 1

Check whether the H1 already exists, and only create it if not.

 console.clear(); var el = {}; $('.placeholder').on('click', function(ev) { $('.placeholder').css('opacity', '0'); $('.list__ul').toggle(); }); $('.list__ul a').on('click', function(ev) { ev.preventDefault(); var index = $(this).parent().index(); $('.placeholder').text($(this).text()).css('opacity', '1'); console.log($('.list__ul').find('li').eq(index).html()); $('.list__ul').find('li').eq(index).prependTo('.list__ul'); $('.list__ul').toggle(); var drink = $('.list__ul li:first-child'); var h = $("h1.dranks"); if (h.length == 0) { h = $("<h1>", { "class": "dranks" }).appendTo($('body')); } h.text(drink.text() + '? Great Choice.'); }); $('select').on('change', function(e) { // Set text on placeholder hidden element $('.placeholder').text(this.value); // Animate select width as placeholder $(this).animate({ width: $('.placeholder').width() + 'px' }); }); 

 .typo, .list a { font-size: 55px; font-weight: 700; font-family: 'Source Sans Pro', sans-serif; color: #202530; text-decoration: none; letter-spacing: 0em; text-transform: lowercase; } .typo option, .list a option { font-size: 55px; } .transition { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .wrapper { padding-top: 150px; height: 100vh; font-size: 55px; } .list { display: inline-block; position: relative; margin-left: 6px; } .list ul { text-align: left; position: absolute; padding: 0; top: 0; left: 0; display: none; letter-spacing: 0.05em; } .list ul .active { display: block; } .list li { list-style: none; padding-top: 3px; } .list li:first-child a { color: #e5b78e; } .list a { -webkit-transition: all .4s; transition: all .4s; color: #e5b78e; position: relative; } .list a:after { position: absolute; content: ''; height: 5px; width: 0; left: 0; background: #dea26e; bottom: 0; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .list a:hover { cursor: pointer; color: #dea26e; } .list a:hover:after { width: 100%; } select { display: inline; border: 0; width: auto; margin-left: 10px; outline: none; -webkit-appearance: none; -moz-appearance: none; border-bottom: 2px solid #555; color: #e5b78e; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } select:hover { cursor: pointer; } select option { border: 0; border-bottom: 1px solid #e5b78e; padding: 10px; -webkit-appearance: none; -moz-appearance: none; } .placeholder { border-bottom: 4px solid; cursor: pointer; letter-spacing: 0em; color: #202530; } .placeholder:hover { color: #e5b78e; } .dranks { position: absolute; z-index: 2; font-family: arial; font-weight: bold; font-size: 50px; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper typo">today i'm feeling like a <div class="list"><span class="placeholder">select</span> <ul class="list__ul"> <li><a href="">Flat White</a></li> <li><a href="">Long Black</a></li> <li><a href="">Cappuccino</a></li> <li><a href="">Mochaccino</a></li> </ul> </div> </div>