CODEWITHSUNDEEP
dart
Pascal Myrta
Pascal Myrta

Reputation: 93

How to create a Dart form

My problem: building a Dart form according to the book. Below, my basic sample that looks like JS. It works fine but I get this warning: The getter value is not defined for the class Element.

My question: how can I write a better Dart code to avoid this warning message? Thanks.

HTML:

<form>
    <input type="number" min="0" id="enter-x">
    <input type="number" min="0" id="enter-y">

    <input type="button" id="result" value="Submit">
    <input type="reset" id="raz" value="Reset">

    <input type="text" id="s" readonly>
</form>

DART:

import 'dart:html';
import 'dart:core';

main() {
    document.querySelector('#result').onClick.listen((e) {
        calculateS();
    });
}

calculateS() {
    var x = int.parse(document.querySelector('#enter-x').value);
    var y = int.parse(document.querySelector('#enter-y').value);
      var surface = (x * y).toString();
    document.querySelector('#s').value = surface;
}

Upvotes: 1

Views: 589

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657476

Dart helps with hints and warning to find errors in your program. The generic Element doesn't have a value field. The Dart program is still valid and should work as expected and doesn't cause any errors or warnings at runtime because the actually returned element is the more specialized TextInputElement or NumberInputElement which has a value field.

To silence the analyzer, make this more clear by adding a "cast"

calculateS() {
  var x = int.parse((document.querySelector('#enter-x') as NumberInputElement).value);
  var y = int.parse((document.querySelector('#enter-y') as NumberInputElement).value);
  var surface = (x * y).toString();
  (document.querySelector('#s') as TextInputElement).value = surface;
}

Try it at DartPad

See also:

Upvotes: 2

Related Questions