CODEWITHSUNDEEP
javascripthtmlbootstrap-4
sirj
sirj

Reputation: 325

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

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/[email protected]/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>

Upvotes: 0

Views: 1111

Answers (4)

Jayakrishnan
Jayakrishnan

Reputation: 15

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>

Upvotes: 0

Salvino D&#39;sa
Salvino D&#39;sa

Reputation: 4506

This should do the trick! 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 1

sathya reddy
sathya reddy

Reputation: 777

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

Upvotes: 0

Yair I
Yair I

Reputation: 1133

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>

Upvotes: 1

Related Questions