How to change the value of parent when i trigger a child?

user_12742391 0
Viewed 256

I want to do something like a dropdown so that my user can pick whether they want gmail, hotmail, or outlook. And then, I want the button to update to show their preference. I must use bootstrap only and thus cannot use < select> due to assignment reasons.

So far, I've tried giving them all the same id, but JS just used the first one, and i dont want to give them all different IDs (too troublesome). So what I've written is to use the child number (like an array) and putting the value into the button. However, I have no idea how to find out the position number of the current html tag. Please help me and thank you for the help in advance

Bootstrap CDN used (Bootstrap 4.6.0): link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"

<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu"  id='emailexample'>
    <a class="dropdown-item" role='button' onclick='example()'>@gmail.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@hotmail.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@outlook.com</a>
    <a class="dropdown-item" role='button' onclick='example()'>@yahoo.com</a>
  </div>
</div>
<script>
   function example() { 
var c = document.getElementById('emailexample').children;
txt = c[i].textContent
document.getElementById("btnemailexample").innerHTML = txt;
   }
   
</script>
bootstrap-4 html javascript
4 Answers

In your case you don't need the search the id or the children, you can just use the event param.

<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu"  id='emailexample'>
    <a class="dropdown-item" role='button' onclick='example(event)'>@gmail.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@hotmail.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@outlook.com</a>
    <a class="dropdown-item" role='button' onclick='example(event)'>@yahoo.com</a>
  </div>
</div>
<script>
   function example(event) { 
    var txt = event.target.textContent;
    document.getElementById("btnemailexample").innerHTML = txt;
   }
   
</script>

user_22187130

This should do the trick! 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id='btnemailexample' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     @example.com
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@gmail.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@hotmail.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@outlook.com</a>
    <a class="dropdown-item" href="#" role='button' onclick='example(this)'>@yahoo.com</a>
  </div>
</div>

<script>
function example(el) {
  var txt = el.textContent;
  document.getElementById("btnemailexample").innerHTML = txt;
}
</script>

user_160465210

A best solution in this case would be to use event delegation which will reduce your ID or Classes markup issue, adding function to every element, etc. It will help you get your required data as well.

Here is a good article on event delegation

user_86354790

You could do this a lot better if you have some JavaScript library like jQuery. I'll show you how to do it by both means.

Please note that I have not linked any styles. So make sure to link them for better viewability.

Using Core Javascript

// Add event listener to table
const el = document.getElementById("emailexample");
el.addEventListener("click", function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement,
    text = target.textContent || target.innerText;
  document.getElementById("btnemailexample").textContent = text;
}, false);
<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu" id='emailexample'>
    <a class="dropdown-item" role='button'>@gmail.com</a>
    <a class="dropdown-item" role='button'>@hotmail.com</a>
    <a class="dropdown-item" role='button'>@outlook.com</a>
    <a class="dropdown-item" role='button'>@yahoo.com</a>
  </div>
</div>

Using jQuery

$("#emailexample .dropdown-item").on('click', function(e) {
  e.preventDefault();
  var text = $(this).text();
  $("#btnemailexample").text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group-append">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='btnemailexample'>@example.com</button>
  <div class="dropdown-menu" id='emailexample'>
    <a class="dropdown-item" role='button'>@gmail.com</a>
    <a class="dropdown-item" role='button'>@hotmail.com</a>
    <a class="dropdown-item" role='button'>@outlook.com</a>
    <a class="dropdown-item" role='button'>@yahoo.com</a>
  </div>
</div>

user_56508120
Related