0

I am trying to copy the number of user input in the "prev" div when the user clicks on an operation sign. Any idea how I can improve my code? When I click an operation button my text disappears and I get the error in the same place.

function calculate(button) {
    let number = (button.innerHTML)
    let current = document.getElementById("current")
    let currentTotal = (current.innerHTML)
    let newTotal = currentTotal + number
    current.innerHTML = newTotal
}

function operation(){
    let current = document.getElementById("current")
    let prev = document.getElementById("prev")
    current.innerHTML = prev
}
    <div class="calc-grid">
        <div id="result">
            <div id="prev"></div>
            <div id="current"></div>
        </div>
        <button class='span' onclick="AC()">AC</button>
        <button>DEL</button>
        <button onClick="operation()">÷</button>
        <button onClick="calculate(this)">1</button>
        <button onClick="calculate(this)">2</button>
        <button onClick="calculate(this)">3</button>
        <button onClick="operation()">*</button>
        <button onClick="calculate(this)">4</button>
        <button onClick="calculate(this)">5</button>
        <button onClick="calculate(this)">6</button>
        <button onClick="operation()">+</button>
        <button onClick="calculate(this)">7</button>
        <button onClick="calculate(this)">8</button>
        <button onClick="calculate(this)">9</button>
        <button onClick="operation()">-</button>
        <button onClick="calculate(this)">.</button>
        <button onClick="calculate(this)">0</button>
        <button class='span'>=</button>
    </div>
Randy Casburn
  • 13,840
  • 1
  • 16
  • 31
  • 1
    Which error are you getting? You’re setting `current.innerHTML = prev`. `innerHTML` expects a string, not an element. – Sebastian Simon Sep 08 '21 at 00:53
  • Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Sep 08 '21 at 00:54
  • Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners — it’s more maintainable, and applies to dynamically added elements. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). – Sebastian Simon Sep 08 '21 at 00:55
  • Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). – Sebastian Simon Sep 08 '21 at 01:04

1 Answers1

0

You are assigning the output of the toString() method of an HTMLDivElement as the InnerHTML of current.

Instead, you'll want to do current.innerHTML = prev.textContent;

Randy Casburn
  • 13,840
  • 1
  • 16
  • 31
  • It just made mu number go away, I didn't paste it in "prev" –  Sep 08 '21 at 01:03
  • That is what you asked it to do - there is no content in the `div` with the `id` of `prev` - so it replaces the current content with nothing. – Randy Casburn Sep 08 '21 at 01:04
  • Oh, sorry I mean to take the input of current and paste it in "prev" –  Sep 08 '21 at 01:05
  • Then simply reverse the assignment statement. I've answered your question. You should accept this and be ready to ask different question with a new post. thanks. – Randy Casburn Sep 08 '21 at 01:08
  • @Kiro Like `prev.textContent = current.textContent;`? Assignment puts the value of the right-hand side into the left-hand side, not the other way around. Familiarize yourself with [expressions and operators](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) and what they do. – Sebastian Simon Sep 08 '21 at 01:08