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>

mstephen19 · Accepted Answer · 2022-09-28 19:09:43Z

2

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>

edited Sep 28, 2022 at 19:09

answered Sep 28, 2022 at 17:29

mstephen19

1,9531 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Unmitigated Over a year ago

For <input type="number">, just use mark.valueAsNumber.

Unmitigated · Accepted Answer · 2022-09-28 15:59:51Z

2

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>

answered Sep 28, 2022 at 15:59

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Collectives™ on Stack Overflow

How I get Input text string value to javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related