Change text on button click when a certain element from a dropdown is selected

Question

I am trying to change the text on the button click when a certain element from the list is selected. For ex: when element "address" is selected from the list I want to press the button and change the text accordingly. Down below is the code I got but it's not working. It's only generating names and not addresses.

HTML:

<p id="generated-text">
Waiting... Just select something right here
</p>

  <div class="dropdown">
    <div class="select">
      <span>Select</span>

    </div>
    <input type="hidden">
    <ul class="dropdown-menu">
      <li id="address">Address</li>
      <li id="name">Name</li>
    </ul>
   </div>

   <span class="msg"></span>
  </div>

  <a href="#" id="trigger" onclick="random()" title="Generate new 
  content" class="generate-btn">RANDOMIZE</a>

JS:

 /*Dropdown Menu*/
  $('.dropdown').click(function () {
    $(this).attr('tabindex', 1).focus();
    $(this).toggleClass('active');
    $(this).find('.dropdown-menu').slideToggle(300);
});
$('.dropdown').focusout(function () {
    $(this).removeClass('active');
    $(this).find('.dropdown-menu').slideUp(300);
});
$('.dropdown .dropdown-menu li').click(function () {
    $(this).parents('.dropdown').find('span').text($(this).text());
    $(this).parents('.dropdown').find('input').attr('value', 
$(this).attr('id'));
});
/*End Dropdown Menu*/


  if (document.getElementById("address").selected = true) {


    function random() {

    var address = new Array();
    address[1] = "709 Honey Creek Dr.New York, NY 10028";
    address[2] = "73 Pacific St.Forest Hills, NY 11375";
    address[3] = "812 Thatcher Court Yonkers, NY 10701";
    address[4] = "3 South Sherman Street Astoria, NY 11106";
    address[5] = "15 St Margarets Lane New York, NY 10033";

    var rdmAddresses = Math.floor(Math.random()*address.length);
    $('#generated-text').html(address[rdmAddresses]);


    }

  }


  if (document.getElementById("name").selected = true) {


    function random() {

    var name = new Array();
    name[1] = "Name 1";
    name[2] = "Name 2";
    name[3] = "Name 3";
    name[4] = "Name 4";
    name[5] = "Name 5";

    var rdmNames = Math.floor(Math.random()*name.length);
    $('#generated-text').html(name[rdmNames]);


    }



  }

Answer 1

There are several issues with your code:

• as done so the if blocks are evaluated only once

• testing of values is done by == or === (stricter), = is assignment, so inside the conditions you're assigning, result of which is the value you are assigning (true in this case)

• you cannot have more functions of the same name

• the elements get by document.getElementById("address") doesn't have selected property (btw selected is unique to the select element; see How to check if an option is selected? )

• even if they had it, you aren't assigning/changing it anywhere

I propose these updates:

• introduce one random function which will call the two randomizers according to what is selected

• as you are already storing which item is selected inside the the hidden input, add it an id and inside the conditions test against it's value instead of messing with the selected property/attribute

HTML changes:

<input id="selected" type="hidden">

JavaScript changes:

function random() {
    var selected = document.getElementById("selected").value;
    console.log('selected:', selected);

    if (selected === 'address')
        randomAddress();
    else if (selected === 'name')
        randomName();
}

function randomAddress() {
    var address = new Array();
    address[1] = "709 Honey Creek Dr.New York, NY 10028";
    address[2] = "73 Pacific St.Forest Hills, NY 11375";
    address[3] = "812 Thatcher Court Yonkers, NY 10701";
    address[4] = "3 South Sherman Street Astoria, NY 11106";
    address[5] = "15 St Margarets Lane New York, NY 10033";

    var rdmAddresses = Math.floor(Math.random()*address.length);
    $('#generated-text').html(address[rdmAddresses]);
}

function randomName() {
    var name = new Array();
    name[1] = "Name 1";
    name[2] = "Name 2";
    name[3] = "Name 3";
    name[4] = "Name 4";
    name[5] = "Name 5";

    var rdmNames = Math.floor(Math.random()*name.length);
    $('#generated-text').html(name[rdmNames]);
}

It would be even better to return just a resulting string from the randomizers and assign the html of the #generated-text inside the random() function so you have the logic connected with the elements on one place (i.e. the less side-effects scattered through the code the better):

function random() {
    var selected = document.getElementById("selected").value;
    var text = 'nothing selected';

    if (selected === 'address')
        text = getRandomAddress();
    else if (selected === 'name')
        text = getRandomName();

    $('#generated-text').html(text);
}

function getRandromAddress() {
    //...
    //$('#generated-text').html(name[rdmNames]);
    return name[rdmNames];
}