Как связать input с кнопкой, чтобы выводилось число?

Question

я не совсем понимаю, как можно связать строку с кнопкой при помощи Javascript, чтобы в этой строке появилось число. Это мой первый опыт работы, где я подключаю Javascript

.body{
    display: flex;
    flex-wrap: wrap;
    width:100%;
}
.bar{
    display: flex;
    position: relative;
    width: 675px;
    height: 50px;
    border:1px solid #000;
    border-radius: 75px;
    text-align:right;
    margin: auto;
    top:250px;
    justify-self: center;
}
.bar::placeholder{
    position: relative;
    right: 20px;
}
button{
    position: relative;
    width: 75px;
    height: 50px;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px; 
}
.number1{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px; 
    border:0px;
    margin: auto;
    top: 306px;
    right:200px;
}
.number2{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 256px;
    right: 100px;
}
.number3{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 206px;
    right: 0px;
}
.number4{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 224px;
    right: 200px;
}
.number5{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 174px;
    right: 100px;
}
.number6{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 124px;
    right: 0px;
}
.number7{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 142px;
    right: 200px;
}
.number8{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 92px;
    right: 100px;
}
.number9{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 42px;
    right: 0px;
}
.number0{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top: 60px;
    right: 100px;
}
.multiplication{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top:-194px;
    left:100px;
    
}
.division{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top:-244px;
    left:200px;
}
.addition{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top:-226px;
    left:100px;
}
.subtraction{
    position: relative;
    width: 75px;
    height: 50px;
    border:1px solid #000;
    background-color: rgb(176, 198, 189);
    text-align:center;
    border-radius: 6px;
    border:0px;
    margin: auto;
    top:-276px;
    left:200px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel="icon" type="images" href="./OIP.jpg">
        <link rel="stylesheet" type="text/css" href="./Website.css">
        <meta http-equiv="Refresh" content="">
        <script src="./Website.js"></script>
    </head>
    <body>
        <div class="buttons">
            <input type="text" class="bar" placeholder="Click on the buttons" readonly>
            <div class="number1"><button>1</button></div>
            <div class="number2"><button>2</button></div>
            <div class="number3"><button>3</button></div>
            <div class="number4"><button>4</button></div>
            <div class="number5"><button>5</button></div>
            <div class="number6"><button>6</button></div>
            <div class="number7"><button>7</button></div>
            <div class="number8"><button>8</button></div>
            <div class="number9"><button>9</button></div>
            <div class="number0"><button>0</button></div>
            <div class="multiplication"><button>x</button></div>
            <div class="division"><button>%</button></div>
            <div class="addition"><button>+</button></div>
            <div class="subtraction"><button>-</button></div>
        </div> 
        <script src="./Website.js"></script>
    </body>
</html>

Answer 1

Я хотел кнопки(цифры) связать с этой строкой, например, я нажимаю на кнопку, где цифра 1 и она должна вывестись в строку с классом .bar

Обрати внимание на класс кнопок.... Он был изменен:

let input = document.querySelector('.bar');

document.querySelectorAll('.number').forEach(numberButton => {
  numberButton.addEventListener('click', () => {
    input.value = numberButton.textContent;
  });
});

.number { display: inline-block; margin: 5px; }

<div class="buttons">
  <input type="text" class="bar" placeholder="Click on the buttons" readonly>
  <div class="number"><button>1</button></div>
  <div class="number"><button>2</button></div>
  <div class="number"><button>3</button></div>
  <div class="number"><button>4</button></div>
  <div class="number"><button>5</button></div>
  <div class="number"><button>6</button></div>
  <div class="number"><button>7</button></div>
  <div class="number"><button>8</button></div>
  <div class="number"><button>9</button></div>
  <div class="number"><button>0</button></div>
</div>

БЛОГ НА HUSL

Как связать input с кнопкой, чтобы выводилось число?

Ответы (1 шт):