поэтому я пытался заставить базовую математику (сложение, вычитание и т. д.) работать в JavaScript. Я хочу, чтобы он взял входные данные с веб-страницы HTML, сделать математику в Javascript, а затем выложить его на той же веб-странице HTML.

function math() {
  //document.getElementById("frm1").innerHTML;
  var numb = document.getElementById("number").innerHTML;
  var mod = document.getElementById("modifier").innerHTML;
  console.log(numb);
  console.log(mod);
  var sum = 1; //numb + mod; //the 1 is a placeholder
  console.log(sum);
  sum = document.getElementById("sum").innerHTML;
}
<form id="frm1" action="randScript.js">
  Number: <input type="int" name="number" id="number"><br> Modifiers: <input type="int" name="modifier" id="modifier"><br>
  <input type="button" onclick="math()" value="Submit">
</form>
<p id="sum"></p>
0
Andon1379

6 ответов

Нет типа int для ввода формы в HTML, вы можете узнать здесь о типах ввода: Типы ввода HTML-форм

<form id="frm1" >
        Number1: <input type="number" name="number" id="number1"><br>
        Number2: <input type="number" name="number" id="number2"><br>
        Modifiers: <input type="text" name="modifier" id="modifier"><br>
        <input type="button" onclick="math()" value="Submit">
</form>
<p id = "sum"></p>


<script type="text/javascript">

    function math() {  
  var numb1 = parseInt(document.getElementById("number1").value);
  var numb2 = parseInt(document.getElementById("number2").value);
  var mod = document.getElementById("modifier").value;
  if(mod == '+'){
    var sum = numb1 + numb2;


  }else if(mod == '-'){
    var sum = numb1 - numb2;

  }else if(mod == '*'){
    var sum = numb1 * numb2;
  }
  if(sum === undefined){
    alert('invalid inputs');
    return false;
  }else{
    document.getElementById("sum").innerHTML = sum; 
  }

  return true;


}

Во-первых: тип является текстовым - здесь нет "int"

 Number: <input type="text" name="number" id="number">

Второе: если мы немного прочтем документацию, мы также выясним, как получить подсказку в части JS

  var numb = document.getElementById("number").value;

здесь вы можете сделать свою домашнюю работу;)

Третье: вернуть вещи назад: либо использовать другой ввод. Они работают двумя способами.

 document.getElementById("result").value="I did not do my homework alone"

или вы помещаете div где-нибудь с идентификатором

<div id="result"> </div>

и теперь вы действительно можете использовать innerHTML в JS

 document.getElementById("result").innerHTML="I am too lazy";

Остальное и все это вместе теперь зависит от вас :) Удачи в учебе :)

Ваш тег формы имеет атрибут action . Это означает, что страница отправит вашу информацию на указанную страницу. Вы можете использовать jQuery для предотвращения отправки формы.

$("#yourFormId").on("submit",function(event){event.preventDefault()})

Вы также можете отредактировать сам атрибут формы action , чтобы запретить его отправку.

<form id="frm1" action"javascript:void(0);">

Так какой у вас вопрос или блокировщик? Вы можете сделать это с помощью чистого html & js, но я предлагаю вам использовать Vue.js или другие Js-фреймворки, так как они имеют хорошую систему реактивности с помощью привязки данных. Вы можете посетить следующее руководство, чтобы взглянуть на то, что я пытался рассказать.

Попробуйте это, если хотите отобразить сумму в элементе html:

document.getElementById("sum").innerHTML = sum;

Но более точный вопрос поможет!

function math() {
  const numb = document.getElementById("number").value;
  const mod = document.getElementById("modifier").value;
  sum = document.getElementById("sum").innerText = parseInt(numb) + parseInt(mod);
}
58522153