Как сделать, чтобы процент отображался в другой строке ввода? - PullRequest
Новая
       54

Как сделать, чтобы процент отображался в другой строке ввода?

0 голосов
/ 30 мая 2019

Я пытаюсь добавить JaveScript в мои строки ввода html. Я хочу, чтобы, когда кто-то вводит определенную сумму денег в одну, эквивалентная сумма в процентах автоматически появляется в другой. Для моментов: если набрать 6000 в одном поле, в другом отобразится 6%.

const btnOne = document.querySelector ('. Btn1');

const btnTwo = document.querySelector ('. Btn2'); 

object.addEventListener("click", myScript); 

function myScript(e) {
    e.preventDefault();
    if(btnOne.nodeValue === '6000') {
    btnTwo.innerHTML = '<h1>6%</h1>';
    }
}



  <!--goal window-->  <!--html-->
    <div class="goal-window">
<div class="goal-window-container">
    <div class="goal-status-and-text">
    <h2 class="goal-text">goal <br> 6,000 = 6%</h2></div>
    <h4><a><br>pledged of 14,000.00 = 14%</a></h4>
    <div class="pledge"><h2>pledge the amount relitive
     to the percentage<br>you would like to purchase.</h2></div>
        <form action="/action_page.php">
      <div class="pay-section"> 
      <input class="btn1" type="text" placeholder="$" name="lname">
      <h2 class="equal-sign">=</h2> 
      <input class="btn2" type="text" placeholder="%" name="lname"><br>
      </div>    
 <button class="invest-button">invest</button>
</form>
</div>
    </div>

    <hr />
    </div>
  </div> 
</div>



/* ### 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;
}

1 Ответ

0 голосов
/ 30 мая 2019

Вы буквально просто указываете конкретное значение в представлении.Вам нужно получить то, что набрал пользователь, преобразовать его в процентное значение и обновить представление новым процентом.Вот пример 

document.getElementById('num-input').addEventListener('input', function(e) {
 let val = e.target.value;
 let percent = parseFloat(val / 1000);
 document.getElementById('percent').value = percent;
})
<input id="num-input" type="number" placeholder="enter a number">
<input id="percent" disabled>
<span>%</span>
...