How I get Input text string value to javascript?

Question

I'm still learning Javascript and I need to get input type text value to javascript code and convert it to integer. but everytime it display "Your fail" even i input higher mark. I need help to find my error.

function mark() {
    var sMark = document.form.mark.value;
    var myMark = parseInt(sMark);
    if (myMark > 75) {
        document.write("You  pass exam with Higher mark");

    } else if (myMark > 50) {
        document.write("You pass exam");

    } else {
        document.write("You Fail");
    }
}

<form action="" name="form">
        Enter Your Mark: <input type="text" name="mark" id="mark1">
        <input type="submit" value="Submit" onclick="mark()"><br>
    </form>

You may also want to read this related question: [Why is document.write considered a "bad practice"?](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice) — Yogi, Sep 28 '22 at 16:27

score 2 · Answer 1 · answered Sep 28 '22 at 15:59

The input with the name "mark" is shadowing the global mark function in the inline onclick handler. Either rename those or directly call window.mark().

function mark() {
  var sMark = document.form.mark.value;
  var myMark = parseInt(sMark);
  if (myMark > 75) {
    document.write("You  pass exam with Higher mark");

  } else if (myMark > 50) {
    document.write("You pass exam");

  } else {
    document.write("You Fail");
  }
}

<form action="" name="form">
  Enter Your Mark: <input type="text" name="mark" id="mark1">
  <input type="submit" value="Submit" onclick="window.mark()"><br>
</form>

mstephen19 · Accepted Answer · 2022-09-28T19:09:43.810

There are some issues with your code.

Use the <label> element to display text that is related to an input element.
Don't use document.write(), just don't.
Use type="number" for an <input> element if you'd like to just receive numbers.
Using onclick is bad practice. Register event listeners using addEventListener() instead.

const result = document.querySelector('#result');
const form = document.forms['mark-form'];

function handleSubmit(e) {
    e.preventDefault();

    const { mark } = e.currentTarget.elements;
    const value = mark.valueAsNumber;

    switch (true) {
        case value > 75:
            result.textContent = 'You pass with a higher mark.';
            break;
        case value > 50:
            result.textContent = 'You pass the exam.';
            break;
        default:
            result.textContent = 'You fail.';
    }
}

form.addEventListener('submit', handleSubmit);

<h1 id="result"></h1>
<form name="mark-form">
    <label for="mark-input">Enter your mark:</label>
    <input type="number" name="mark" id="mark-input" />
    <button type="submit">Submit</button>
</form>

For ``, just use `mark.valueAsNumber`. – Unmitigated Sep 28 '22 at 17:36 — Unmitigated, Sep 28 '22 at 17:36

How I get Input text string value to javascript?

2 Answers2