Не изменяется атрибут p при изменении текста в значение из input

let sumInput = document.querySelector('.sumInput');
let qualInput = document.querySelector('.qualInput');
let qualSelect = document.querySelector('.qualSelect')
let sum1Input = document.querySelector('.sum1Input');
let calcBut = document.querySelector('.calcBut');
let sbros = document.querySelector('.sbros');
let tw = document.querySelector('.tw');
let tw1 = document.querySelector('.tw1');

var text = document.getElementsByTagName("input")[0];

var val;                                        // 
                                                //
text.addEventListener('input', e=> {            //
  val = e.target.value                          //
})                                              //

var text1 = document.getElementsByTagName("input")[1];
var val1 = text.value;


calcBut.addEventListener('mouseover', (event) => {
    event.target.style.backgroundColor = '#F5D033';
});
calcBut.addEventListener('mouseout', (event) => {
    event.target.style.backgroundColor = '#FFDC40';
});

sbros.addEventListener('mouseover', (event) => {
    event.target.style.backgroundColor = '#828282';
});
sbros.addEventListener('mouseout', (event) => {
    event.target.style.backgroundColor = '#7C7A7A';
});

calcBut.onclick = function () {
    if (qualSelect.value == "bad") {
        tw1.innerHTML = val
    }
}

sbros.onclick = function () {
   sumInput.value = "";
   sum1Input.value = "";
}

*{
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
    list-style: none;
}

.wrapper{
    margin:0 auto;
    position: relative;
    width: 500px;
    height: 800px;
    background: #360160;
}

.calc{
    position: absolute;
    width: 380px;
    height: 94px;
    left: 60px;
    top: 34px;
    font-style: normal;
    font-weight: 700;
    font-size: 52px;
    line-height: 90.3%;
    color: #FFDC40;
}

.sum{
    position: absolute;
    width: 380px;
    height: 23px;
    left: 60px;
    top: 170px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;  
    color: #FFFFFF;
}

.sumInput{
    box-sizing: border-box;
    position: absolute;
    width: 380px;
    height: 50px;
    left: 60px;
    top: 200px;
    background: #FFFFFF;
    border: 2px solid #A4CEF4;
    border-radius: 5px;
    font-size: 20px;
    padding-left: 20px;
}

.qual{
    position: absolute;
    width: 380px;
    height: 23px;
    left: 60px;
    top: 271px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.qualSelect{
    box-sizing: border-box;
    position: absolute;
    width: 380px;
    height: 50px;
    left: 60px;
    top: 301px;
    background: #FFFFFF;
    border: 2px solid #A4CEF4;
    border-radius: 5px;
    outline: 0px;
    font-size: 20px;
    padding-left: 20px;
}

.sum1{
    position: absolute;
    width: 380px;
    height: 23px;
    left: 60px;
    top: 371px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
}

.sum1Input{
    box-sizing: border-box;
    position: absolute;
    width: 380px;
    height: 50px;
    left: 60px;
    top: 401px;
    background: #FFFFFF;
    border: 2px solid #A4CEF4;
    border-radius: 5px;
    font-size: 20px;
    padding-left: 20px;
}

.calcBut{
    position: absolute;
    width: 180px;
    height: 60px;
    left: 60px;
    top: 480px;
    background: #FFDC40;
    border-radius: 15px;
    outline: none;
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    border: none;
}

.sbros{
    position: absolute;
    width: 180px;
    height: 60px;
    left: 260px;
    top: 480px;
    background: #7C7A7A;
    border-radius: 15px;
    border: none;
    outline: none;
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    line-height: 22px;
    color: #FFFFFF;
}

.money{
    position: absolute;
    width: 147px;
    height: 29px;
    left: 60px;
    top: 607px;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 29px;
    color: #FFFFFF;
}

.money1{
    position: absolute;
    width: 147px;
    height: 29px;
    left: 60px;
    top: 666px;
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 29px;
    color: #FFFFFF;
}

.tw{
    position: absolute;
    width: 147px;
    height: 40px;
    left: 172px;
    top: 600px;
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 40px;
    color: #FFFFFF;
}

.tw1{
    position: absolute;
    width: 147px;
    height: 40px;
    left: 172px;
    top: 660px;
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 40px;
    color: #FFFFFF;
}

.every{
    position: absolute;
    width: 112px;
    height: 21px;
    left: 260px;
    top: 614px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    text-align: right;   
    color: #B6B6B6;
}

.every1{
    position: absolute;
    width: 112px;
    height: 21px;
    left: 260px;
    top: 673px;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    text-align: right;
    color: #B6B6B6;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Калькулятор чаевых</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,300&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,300&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
        </head>
    <body>
        <div class="wrapper">
            <h1 class="calc">Калькулятор чаевых</h1>
            <h1 class="sum">Сумма по счету</h1>
            <input class="sumInput">
            <h1 class="qual">Качество облуживания</h1>
            <label class="qualInput">
                <select class="qualSelect">
                  <option value="bad">Плохое(0%)</option>
                  <option value="normal">Нормальное(5%)</option>
                  <option value="good">Хорошее(10%)</option>
                  <option value="vgood">Отлчиное(15%)</option>
                </select>
              </label>
            <h1 class="sum1">Количество человек</h1>
            <input class="sum1Input">
            <button class="calcBut">ПОСЧИТАТЬ</button>
            <button class="sbros">СБРОСИТЬ</button>
            <h1 class="money">Чаевые:</h1>
            <h1 class="money1">Всего:</h1>
            <p class="tw">25₽</p>
            <p class="tw1">250₽</p>
            <p class="every">(с каждого)</p>
            <p class="every1">(с каждого)</p>
        </div>
        <script src="style.js"></script>
    </body>
</html>