Вы добавляете результат к содержимому вашего тега p.
Если вы просто хотите показать результат, вам нужно переопределить innerHTML вместо добавления к нему.
p.innerHTML = showProduct;
Также, если вы хотите обновить результат по мере ввода, используйте событие oninput вместо onchange, которое будет срабатывать только при выходе из поля <input>.
Если вы такжехотите обновить поля множителя и умножения, просто сделайте то же самое, что и для продукта:
document.getElementById('showMulipicand').innerHTML = multiplicand;
Чтобы избежать проблем NaN, когда вы читаете множитель / множитель из <input>, сделайте логическоеor с 0, таким образом, если поле пустое, его значение будет 0.
Вам также следует изменить тип <input> с text на number.
Вот код для отображения результата умножения:
function multiply() {
const multiplicand = document.getElementById('multiplicand').value || 0;
const multiplier = document.getElementById('multiplier').value || 0;
const product = parseInt(multiplicand) * parseInt(multiplier);
document.getElementById('showMulipicand').innerHTML = multiplicand;
document.getElementById('showMultiplier').innerHTML = multiplier;
document.getElementById('showProduct').innerHTML = product;
}
<h1>Mutiply</h1>
<p>Multiplicand: <input type="number" id="multiplicand" value="0" oninput="multiply()"></p>
<p>Multiplier: <input type="number" id="multiplier" value="0" oninput="multiply()"></p>
<p>
<span id="showMulipicand">0</span> ×
<span id="showMultiplier">0</span> = <span id="showProduct">0</span>
</p>