How to change text to what it's selected in Javascript?

Question

I have a menu that contains 3 items. How can I change that the text to what it's selected from the menu?

HTML

<div id="dropdown-container">
<div id="index-tab" onclick="toggleMenu()"><a href="#">1</a></div>
    <ul id="dropdown">
        <li ><a href="#"><span class="current-browse">1</span></a>
            <ul class="dropdown-items">
                <li class="dropdown-item"><a href="#">2</a></li>
                <li class="dropdown-item""><a href="#">3</a></li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

function toggleMenu() {
var dropDown = document.getElementById('dropdown');    
if(dropdown.style.display == "block") { 
     dropdown.style.display = "none";
} else { 
     dropdown.style.display = "block";
   } 
}

For example the menu currently showing:

1

2

3

If selected 2, it will show:

2

1

3

If selected 3 it will show :

3

1

2

@zer00ne the toggleMenu function I currently have only show/hides the menu. I'll add it in. — Fortytwo, Sep 20 '16 at 22:43
Ok, review my answer, let me know if it's what you were after or not. — zer00ne, Sep 20 '16 at 23:47

score 1 · Answer 1 · answered Sep 20 '16 at 23:03

1

Are you wanting to set the text of index-tab or the text of the current-browse span? Either way you need some click handlers on the li items that gets the element with the id or class of whichever one you want to set (Will need to get the anchor child of the index-tab div if it is used). Then replace the text element of the anchor or span. jQuery will make it a bit easier, but can be done either way. The jQuery example given will need to get the anchor child to then set text, and doing it when showing the menu is not what you want since no item is clicked yet.

answered Sep 20 '16 at 23:03

Roger Garstang

71
8

I want both index-tab and current-browse span to be set the same. – Fortytwo Sep 21 '16 at 01:34
1

OK, zer00ne's code should work for you then, or at least get you in the right direction. Just put it in a script file or script block. I usually like files to make debugging in Developer Console easier. Put it at end of HTML so elements are there to attach the event to. – Roger Garstang Sep 21 '16 at 03:51

score 0 · Answer 2 · answered Sep 20 '16 at 22:20

0

you need to write the toggleMenu() in a way that it changes the text of index-tab based on the value of dropdown:

$("#index-tab").text($(".dropdown-item option:selected").text())

answered Sep 20 '16 at 22:20

afsafzal

592
5
15

can you show me the JavaScript interpretation of the code above? – Fortytwo Sep 20 '16 at 22:41
@Fortytwo that is JavaScript. It's jquery. You should put this line in the toggleMenu function. – afsafzal Sep 20 '16 at 22:53

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Added toggleSelection() function:

event.preventDefault(); used to prevent links default action which is jumping to a location.
selectedItem references event.target (i.e. the element that was actually clicked), which is either the one of the .dropdown-items.
There's multiple exchanges between elements based on the .textContent of the selectedItem. At this point, #current-browse, and #index-tab a (the link in #index-tab) have a new .textContent and selectedItem has the previous item number.
All of that will not happen until #dropdown is clicked on and the event.target is determined. this is possible by the eventListener:
```
   dropDown.addEventListener('click', toggleSelection, false);
```

SNIPPET

function toggleMenu() {
  var dropDown = document.getElementById('dropdown');
  if (dropDown.style.display == "block") {
    dropDown.style.display = "none";
  } else {
    dropDown.style.display = "block";
  }
}

function toggleSelection(event) {
  event.preventDefault();
  var selectedItem = event.target;
  var targetItem = selectedItem.textContent;
  var currentItem = document.getElementById('current-browse');
  var prevItem = currentItem.textContent;
  var extLink = document.querySelector('#index-tab a');
  currentItem.textContent = targetItem;
  extLink.textContent = targetItem;
  selectedItem.textContent = prevItem;
}

var dropDown = document.getElementById('dropdown');

dropDown.addEventListener('click', toggleSelection, false);

<div id="dropdown-container">
  <div id="index-tab" onclick="toggleMenu()"><a href="#">1</a>
  </div>
  <ul id="dropdown">
    <li><a href="#"><span id="current-browse">1</span></a>
      <ul class="dropdown-items">
        <li class="dropdown-item"><a href="#">2</a>
        </li>
        <li class="dropdown-item"><a href="#">3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

REFERENCE

addEventListener vs. onclick

'this' and EventHandlers

Where do I add the line ***dropDown.addEventListener('click', toggleSelection, false);*** to? — Fortytwo, Sep 21 '16 at 02:10
It'll do it's job right where it is right now, is it not working for you or are you wondering how it'll fit with the rest of your code? — zer00ne, Sep 21 '16 at 04:33
I got it working now. Thank you. I just didn't put the code at the end of the HTML as Roger Garstang said. — Fortytwo, Sep 21 '16 at 15:57

How to change text to what it's selected in Javascript?

3 Answers3

SNIPPET

REFERENCE