Как получить возвращаемое значение из формы ввода? - PullRequest
Новая
       29

Как получить возвращаемое значение из формы ввода?

0 голосов
/ 29 апреля 2020 

<form>
        <input type="number" placeholder="rows" min="1" max="300" id ="RowInput" value="" oninput="rowValue()">
        <p>x</p>
        <input type="number" placeholder="columns" min="1" max="300" id="ColumnInput" value="" oninput="columnValue()"> 
        <input type="submit" id="Submit" value="" onsubmit="getGridValue()" >

      </form>


let tile = document.getElementById("tile")
let rowInput = ''
let columnInput = ''
let gridLength = ''


function rowValue() {
    rowInput = document.getElementById('RowInput').value
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value 

}

function getGridLength() {
    gridLength = columnInput * rowInput
}

alert(gridLength)

Итак, я пытаюсь обновить gridLength, получив значения от columnInput и rowInput и используя их для получения числа. Я использовал для этого списки событий oninput, хотя я не уверен, возвращает ли он пользовательский ввод в виде числа. И затем, когда они используются для умножения их обоих, это никак не влияет на переменную gridLength. Я не понимаю, что я делаю неправильно, так как идея этого кажется такой простой.

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Единственное, что, по-моему, вызвало у вас проблемы, - это onSubmit. Он должен появляться внутри элемента формы, а не внутри элемента input type = "submit". В любом случае, я сделал несколько модификаций и протестировал, и следующее работает так, как вы хотели: 

<form onsubmit="getGridLength();">
    <input type="number" placeholder="rows" min="1" max="300" id ="RowInput" value="" oninput="rowValue();">
    <p>x</p>
    <input type="number" placeholder="columns" min="1" max="300" id="ColumnInput" value="" oninput="columnValue();"> 
    <input type="submit" id="Submit" value="">
</form>
<script>
var tile = document.getElementById("tile");
var rowInput;
var columnInput;
var gridLength;

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
}

function getGridLength() {
    gridLength = columnInput * rowInput
    alert(gridLength);
}
</script>

Кроме того, я бы предложил завершить каждую команду Javascript запятым-разделителем (; ) так же, как я сделал в коде выше. Вам также будет легче работать со следующими языками программирования, с которыми вы будете работать, поскольку большинству из них это требуется в конце команды.

1 голос
/ 29 апреля 2020

Вы можете попробовать код, как показано ниже: 

function rowValue() {
    rowInput = document.getElementById('RowInput').value;
    getGridLength();
}

function columnValue() {
    columnInput = document.getElementById('ColumnInput').value;
    getGridLength();
}

function getGridLength() {
    gridLength = columnInput * rowInput;
    console.log(gridLength);
}

Вы можете изменить console.log для оповещения, если это необходимо, хотя console.log лучше.

...