title: How to make a percentage appear in the other input bar?
body: <p>I'm trying to add JaveScript to my html input bars, what I want is for when someone enters a certain amount of money in one an equivalent amount of percentage will automatically appear in the other. For instants: typing 6000 in one box will cause the other to show 6%. </p>
  
  <p>const btnOne = document.querySelector('.btn1');</p>
  
  <p>const btnTwo = document.querySelector('.btn2');</p>
  
  <pre><code>object.addEventListener("click", myScript); 
  
  function myScript(e) {
      e.preventDefault();
      if(btnOne.nodeValue === '6000') {
      btnTwo.innerHTML = '&lt;h1&gt;6%&lt;/h1&gt;';
      }
  }
  
  
  
    &lt;!--goal window--&gt;  &lt;!--html--&gt;
      &lt;div class="goal-window"&gt;
  &lt;div class="goal-window-container"&gt;
      &lt;div class="goal-status-and-text"&gt;
      &lt;h2 class="goal-text"&gt;goal &lt;br&gt; 6,000 = 6%&lt;/h2&gt;&lt;/div&gt;
      &lt;h4&gt;&lt;a&gt;&lt;br&gt;pledged of 14,000.00 = 14%&lt;/a&gt;&lt;/h4&gt;
      &lt;div class="pledge"&gt;&lt;h2&gt;pledge the amount relitive
       to the percentage&lt;br&gt;you would like to purchase.&lt;/h2&gt;&lt;/div&gt;
          &lt;form action="/action_page.php"&gt;
        &lt;div class="pay-section"&gt; 
        &lt;input class="btn1" type="text" placeholder="$" name="lname"&gt;
        &lt;h2 class="equal-sign"&gt;=&lt;/h2&gt; 
        &lt;input class="btn2" type="text" placeholder="%" name="lname"&gt;&lt;br&gt;
        &lt;/div&gt;    
   &lt;button class="invest-button"&gt;invest&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;hr /&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  
  
  
  /* ### goal window ### */ /*###CSS###*/
  
  .goal-window {
      width: 96%;
      height: 40rem;
      border-radius: 40px;
      margin-top: 2rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 5px 10px #888888;
      border: 4px solid rgb(187, 183, 183);
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  
  .goal-window-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 2.5rem;
  }
  
  .goal-text {
      font-size: 4rem;
      text-align: center;
  }
  
  .goal-status-and-text {
     display: flex;
     height: 4rem;
     align-items: center;
     margin-top: 2rem;
  }
  
  .goal-number {
      height: 4rem;
      border: 4px solid rgb(187, 183, 183);
  }
  
  .pledge {
      text-align: center;
  }
  
  input {
      border: 4px solid black;
      height: 2rem;
  }
  
  .equal-sign {
      padding: 0 8px;
  }
  
  .pay-section {
      display: flex;
      align-items: center;
  }
  /* ### invest botton ### */
  
  .invest-button {
      width: 100%;
      height: 10rem;
      border-radius: 30px;
      font-size: 6rem;
      margin-top: 4rem;
  }
  
  hr {
      width: 100%;
      background-color: black;
      border: 2px solid black;
      margin-top: 6rem;
  }
  </code></pre>