<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ГГ</title> <style> * { margin:0; padding: 0; outline: none; } .container { margin: 50px; border: 1px solid red; } </style> </head> <body> <form class="container"> <div class="vvod">Введите стоимость товара:</div> <input type="text"> <div class="text"> <span class="cost">Стоимость товара</span> <span class="cost-price"></span> <span class="rubl">руб.</span> </div> <label for="sber">Сбер: <input type="radio" id="sber" name="cost"></label> <label for="sber">Яндекс деньги: <input type="radio" id="yad" name="cost"></label> <label for="sber">Терминал: <input type="radio" id="terminal" name="cost"></label> </form> <script> var costPrice = document.querySelector('.cost-price'); var sber = document.querySelector('#sber'); var yad = document.querySelector('#yad'); var teminal = document.querySelector('#terminal'); var input = document.querySelector('input[type="text"]'); input.oninput = function(){ costPrice.innerHTML = input.value; } sber.onclick = function(){ costPrice.innerHTML = (input.value*1.03).toFixed(2); } yad.onclick = function(){ costPrice.innerHTML = (input.value*1.01).toFixed(2); } teminal.onclick = function(){ costPrice.innerHTML = (input.value).toFixed(2); } </script> </body> </html>
