<div class="container">
  <form method="POST">
    <input type="number" name="a" class="form-control mt-2" placeholder="a">
    <input type="number" name="b" class="form-control mt-2" placeholder="b">
    <input type="number" name="c" class="form-control mt-2" placeholder="c">
    <button type="submit" name="button" class="btn btn-danger mt-2">Отправить</button>
    <span class="result"></div>
  </form>
</div>
const button = document.querySelector('button');
const resultEl = document.querySelector('.result');
const 
    aInput = document.querySelector('input[name="a"]'),
    bInput = document.querySelector('input[name="b"]'),
    cInput = document.querySelector('input[name="c"]');

button.addEventListener('click', (e) => {
  e.preventDefault();
  
  let { a, b, c } = { a: Number(aInput.value), b: Number(bInput.value), c: Number(cInput.value) };
  
  const rightOperand = 4 * a * c;
  const leftOperand = b * b;
  
  const D_lucum = `${leftOperand >= 0 ? leftOperand : `(${leftOperand})`} - ${rightOperand >= 0 ? rightOperand : `(${rightOperand})`}`;
  const D = b * b - 4 * a * c;
  
  const result = `D = ${D_lucum} = ${D}`;
  resultEl.textContent = result;
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.