Как захватить несколько кнопок одним щелчком мыши и отправить контент в локальное хранилище

Question

Новичок в программировании, 7 недель в классе Bootcamp. Я пытаюсь управлять 9 разными кнопками с помощью функции одного щелчка в Javascript, и я получаю сообщение об ошибке «Uncaught TypeError: Cannot read property 'addEventListener' of null» . Каждая кнопка должна отправлять содержимое текстового поля в localStorage. Как видно из кода HTML, я пытаюсь управлять кнопкой «save9am» щелчком на верхнем уровне с помощью класса «pageMaster». Помогите!

var controlAll = document.querySelector("pageMaster");
controlAll.addEventListener("click", doSomething, false);

function doSomething(e) {
    if (e.target !== e.currentTarget) {
        var clickedItem = document.getElementById("box9").value;
        localStorage.setItem("text", clickedItem);
    }
    if (e.target !== e.currentTarget) {
        var clickedItem = document.getElementById("box16").value;
        localStorage.setItem("text", clickedItem);
    }

    if (e.target !== e.currentTarget) {
        var clickedItem = document.getElementById("box17").value;
        localStorage.setItem("text", clickedItem);
    }
    e.stopPropagation();
}

<tbody class="pageMaster">
    <tr>
      <div class = "col-md-2">
        <th scope="row" id="9amTime" class="timeOfDay">9:00am</th>
      </div>
      <div class = "col-md-8">
        <td class="event-box"><textarea class="text-box" value="" id="box9"></textarea></td>
      </div>
      <div class = "col-md-2">
        <td class="save-box"><button id="save9am" class="btn btn-outline-secondary saveBtn" type="button"><i
          class="far fa-save"></i></button></td>
      </div>
    </tr>
<tbody>

Answer 1

Чрезвычайно сложно прочитать ваш вопрос, но я подозреваю, что это именно то, что вы имели в виду для использования:

var container_elem = document.querySelector(".container");
container_elem.addEventListener("click", doSomething, false);

function doSomething(e) {
    if (e.target !== e.currentTarget) {
        var input_text = document.getElementById("textinput").value;
        console.log('input_text', input_text)
    }
}

<div class="container">
<textarea id="textinput"></textarea>
<p>some arbitrary element</p>
<button>a buttin</button>
</div>