Количество в дюймах для преобразования в футы, сантиметры или ярды Javascript - PullRequest
Новая
       6

Количество в дюймах для преобразования в футы, сантиметры или ярды Javascript

0 голосов
/ 18 сентября 2018

Инструкция идет следующим образом:

  1. Попросите пользователя ввести количество в дюймах (в текстовом поле).

  2. Имеется поле выбора с опциями для: футов, сантиметров, ярдов.

  3. Если они выбрали дюймы, рассчитайте конверсию как 1 дюйм = 0,0833 фута. Для сантиметров: 1 дюйм = 2,54 сантиметра. Для ярдов 1 дюйм = 0,02778.

  4. Поскольку пользователь может ввести десятичное число (например, 3,99), обязательно выполните синтаксический анализ, используя параметр parseFloat.

  5. Использование справочника: найдите функцию toFixed() и убедитесь, что ваш результат выводится с точностью до 2 десятичных знаков.

  6. Вывод в раздел с именем results. Вывод с помощью команды innerHTML.

Это код, который у меня сейчас есть 

function convertCurrency(r) {
  document.getElementById("cnvrtMoney").innerHTML = "output";

  if (dropdown == "feetConversion".parseFloat(r)) {
    Convert = Convert / 0.0833;
  } else if (dropdown == "centimetersConversion".parseFloat(r)) {
    Convert = Convert / 2.54;
  } else if (dropdown == "yardsConversion".parseFloat(r)) {
    Convert = Convert / 0.02778;
  }

  Convert = Convert.toFixed(2);

  var resultsString = "The amount would be" + Convert;
  document.getElementById('results').innerHTML = resultsString;
}
body {
  background-color: gray;
}

#heading {
  background-color: lightgray;
  text-align: center;
}

#formConverter {
  background-color: white;
  text-align: center;
  text-justify: auto;
}

#EndResults {
  background-color: darkgray;
  text-align: center;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Assignment 01: Currency Converter</title>
</head>

<body>
  <div id="heading">
    <h1> Currency Converter </h1>
    <img src="CurrencyConverter.jpg" alt="Currency Converter Banner" width="600" height="200">
  </div>
  <div id="formConverter">
    <form action="CurrencyConverter.php" method="get">
      Enter Quantity (In Inches): <input type="text" name="inputInches" /><br> Select Conversion:
      <select name="dropdown">
        <option value="feetConversion">Feet </option>
        <option value="centimetersConversion">Centimeters </option>
        <option value="yardsConversion">Yards </option>
      </select>
    </form>
  </div>
  <div id="results">
  </div>
</body>

</html>

Я пытаюсь заставить его отображаться, когда пользователь нажимает на кнопку выпадающего меню с точным преобразованием, которое должно быть. Если бы кто-нибудь мог помочь, я был бы очень признателен.

Ответы [ 4 ]

0 голосов
/ 18 сентября 2018

  1. Вы никогда не звоните convertCurrency. Вам нужен слушатель событий, который его вызывает. Вы можете поместить кнопку «Преобразовать» в форму и вызывать ее, когда они нажимают на кнопку.

  2. Код типа if (dropdown == "feetConversion".parseFloat(r)) не имеет смысла. parseFloat() - это глобальная функция, а не метод строки. Вы просто хотите сравнить dropdown со строкой. parseFloat должен использоваться для установки переменной Convert в начале функции.

  3. Вам не нужно action или method в форме, которая обрабатывается в JavaScript, а не на сервере.

  4. Вы никогда не устанавливаете значение dropdown. Вы должны получить это из значения раскрывающегося списка. Я добавил к нему идентификатор и получил его, используя document.getElementById("selectConversion").value

  5. Нет элемента cnvrtMoney. Я не уверен, какой должна быть точка document.getElementById("cnvrtMoney").innerHTML = "output";. Я удалил его.

  6. Все ваши преобразования неверны, вы делитесь, когда должны умножаться. 

function convertCurrency(r) {
  var dropdown = document.getElementById("selectConversion").value;
  var Convert = parseFloat(r);
  if (dropdown == "feetConversion") {
    Convert = Convert / 12;
  } else if (dropdown == "centimetersConversion") {
    Convert = Convert * 2.54;
  } else if (dropdown == "yardsConversion") {
    Convert = Convert / 36;
  }

  Convert = Convert.toFixed(2);

  var resultsString = "The amount would be " + Convert;
  document.getElementById('results').innerHTML = resultsString;
}

document.getElementById("convertButton").addEventListener("click", function() {
  convertCurrency(document.getElementById("inputInches").value);
});
body {
  background-color: gray;
}

#heading {
  background-color: lightgray;
  text-align: center;
}

#formConverter {
  background-color: white;
  text-align: center;
  text-justify: auto;
}

#EndResults {
  background-color: darkgray;
  text-align: center;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Assignment 01: Currency Converter</title>
</head>

<body>
  <div id="heading">
    <h1> Currency Converter </h1>
    <img src="CurrencyConverter.jpg" alt="Currency Converter Banner" width="600" height="200">
  </div>
  <div id="formConverter">
    <form>
      Enter Quantity (In Inches): <input type="text" name="inputInches" id="inputInches" /><br> Select Conversion:
      <select name="dropdown" id="selectConversion">
        <option value="feetConversion">Feet </option>
        <option value="centimetersConversion">Centimeters </option>
        <option value="yardsConversion">Yards </option>
      </select>
      <br>
      <input type="button" value="Convert" id="convertButton">
    </form>
  </div>
  <div id="results">
  </div>
</body>

</html>
0 голосов
/ 18 сентября 2018

Здесь многое нужно исправить, но изменение содержимого вашего тега скрипта на следующее должно работать: 

<script>
window.onload = function() {
    var form = document.getElementById( "convert-input" );
    form.getElementsByTagName( "select" )[ 0 ].addEventListener( "input", function(){
        convertCurrency( this.value, form.getElementsByTagName( "input" )[ 0 ].value );
    }, true );
}

function convertCurrency( dropdown, r) {

    if (dropdown == "feetConversion"){
        Convert = parseFloat(r) * 0.0833;
    }
    else if (dropdown == "centimetersConversion"){
        Convert = parseFloat(r) * 2.54;
    }
    else if (dropdown == "yardsConversion"){
        Convert = parseFloat(r) * 0.02778;
    }

    Convert = Convert.toFixed(2);

    var resultsString = "The amount would be " + Convert;
    document.getElementById('results').innerHTML = resultsString;
}
</script>

Обратите внимание, что ваши конверсии были неправильными, так как вы выбрали нужный коэффициент масштабированияумножение

0 голосов
/ 18 сентября 2018

Во-первых, это код JavaScript, вам не нужно <form>.
Во-вторых, чтобы получить доступ к элементам по идентификатору, вы должны установить атрибут ID вместо NAME.
В-третьих, математика не так.
Forth ...

Лучше показать рабочий код. Это обработчик событий: 

function convertCurrency() {

    var dropdown = document.getElementById("dropdown").value;
    var inputInches = document.getElementById("inputInches").value;

    switch (dropdown){
    case "feetConversion":
        Convert = inputInches * 0.0833;
        break;
    case "centimetersConversion":
        Convert = inputInches * 2.54;
        break;
    case "yardsConversion":
        Convert = inputInches * 0.02778;
        break;
    }

    var resultsString = "The amount would be: " + Convert;
    document.getElementById("results").innerHTML = resultsString;
}

Это макет HTML: 

<input type="text" id="inputInches"/><br>
Select Conversion:
<select id="dropdown" onchange="convertCurrency()">
    <option value="" disabled="disabled" selected="selected"></option>
    <option value="feetConversion">Feet </option>
    <option value="centimetersConversion">Centimeters </option>
    <option value="yardsConversion">Yards </option>
</select>
<div id="results"></div>

http://jsfiddle.net/ArtyomShegeda/xbj5pf62/13/

0 голосов
/ 18 сентября 2018

Хорошо, мне пришлось переписать всю вещь, но вот она 

function convertCurrency(r) {
	let c = document.getElementById('q').value;
	let v = document.getElementById('c').value;
  
  
  switch(v){
    case "feet":
      result = c / 0.0833;
    break;
    case "cent":
    	result = c / 2.54;
    break;
    case "yard":
    	result = c /0.02778;
    break;
  }
  
  result = result.toFixed(2);

  var resultsString = "The amount would be " + result;
  document.getElementById('results').innerHTML = resultsString;
}
body {
        background-color: gray;
        }
#heading {
    background-color: lightgray;
    text-align: center;
    }
#formConverter{
    background-color: white;
    text-align: center;
    text-justify:auto;
    }
#results{
    background-color:darkgray;
    text-align: center;
}
<div id="heading">
        <h1> Currency Converter </h1>
        <img src="CurrencyConverter.jpg" alt="Currency Converter Banner" width="600" height="200">
    </div>
    <div id="formConverter">
        <p>
          Enter Quantity (in inches):
          <input type="number" id="q" name="q">
        </p>
        <p>
          Select conversion: 
          <select id="c" name="c">
            <option value="feet">Feet</option>
            <option value="cent">Centimeters</option>
            <option value="yard">Yards</option>
          </select> 
        </p>
        <button onclick="convertCurrency()">
          Convert
        </button>
    </div>
    <div id="results">
      
    </div>
...