JavaScript星座计算器说“未定义”

时间：2019-05-24 23:41:05

标签： javascript

我对此很陌生，当时的想法是制造一个非常简单的星座计算器。您从选择选项中选择您的出生月份和日期，单击“计算”按钮，您的十二生肖应该会在段落元素中弹出。 问题是，它没有显示您的标志，而是显示“未定义”。在控制台中没有错误弹出。 为什么会发生这种情况，我该如何解决？拜托了，谢谢：）

const Day = document.getElementById("day");
const Button = document.getElementById("button");

const January = document.getElementById("Jan");
const February = document.getElementById("Feb");
const March = document.getElementById("Mar");
const April = document.getElementById("Apr");
const May = document.getElementById("May");
const June = document.getElementById("June");
const July = document.getElementById("July");
const August = document.getElementById("Aug");
const September = document.getElementById("Sept");
const October = document.getElementById("Oct");
const November = document.getElementById("Nov");
const December = document.getElementById("Dec");

const Result = document.getElementById('result');

function GetSign (Month, Day) {
if (Month == March && Day >=21 || Month == April && Day <=19) {
Result.innerHTML = "Aries";
}
else if (Month == March && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == April && Day >=20 || Month == May && Day <=20) {
Result.innerHTML = "Taurus";
}
else if (Month == April && Day > 30) {
Result.innerHTML = "invalid date";
}
else if (Month == May && Day >=21 || Month == June && Day <=21) {
Result.innerHTML = "Gemini";
}
else if (Month == May && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == June && Day >=22 || Month == July && Day <=22) {
Result.innerHTML = "cancer";
}
else if (Month == June && Day > 30) {
Result.innerHTML = "invalid date";
}
else if (Month == July && Day >=23 || Month == August && Day <=22) {
Result.innerHTML = "Leo";
}
else if (Month == July && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == August && Day >=23 || Month == September && Day <=22) {
Result.innerHTML = "virgo";
}
else if (Month == August && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == September && Day >=23 || Month == October && Day <=22) {
Result.innerHTML = "libra";
}
else if (Month == September && Day > 30) {
Result.innerHTML = "invalid date";
}
else if (Month == October && Day >=23 || Month == November && Day <=21) {
Result.innerHTML = "scorpio";
}
else if (Month == October && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == November && Day >=22 || Month == December && Day <=21) {
Result.innerHTML = "Sagittarius";
}
else if (Month == November && Day > 30) {
Result.innerHTML = "invalid date";
}
else if (Month == December && Day >=22 || Month == January && Day <=19) {
Result.innerHTML = "capricorn";
}
else if (Month == December && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == January && Day >=20 || Month == February && Day <=18) {
Result.innerHTML = "Aquarius";
}
else if (Month == January && Day > 31) {
Result.innerHTML = "invalid date";
}
else if (Month == February && Day >=19 || Month == March && Day <=20) {
Result.innerHTML = "pisces";
}
else if (Month == February && Day > 29) {
Result.innerHTML = "invalid date";
}
}
Button.addEventListener('click', GetSign);

        <option value = "January" id = "Jan">January</option>
        <option value = "February" id = "Feb">February</option>
        <option value = "March" id = "Mar">March</option>
        <option value = "April" id = "Apr">April</option>
        <option value = "May" id = "May">May</option>
        <option value = "June" id = "june">June</option>
        <option value = "July" id = "July">July</option>
        <option value = "August" id = "Aug">August</option>
        <option value = "September" id = "Sept">September</option>
        <option value = "October" id = "Oct">October</option>
        <option value = "November" id = "Nov">November</option>
        <option value = "December" id = "Dec">December</option>
      </select>
      <select name = "day" id = "day">
        <option value = "1">1</option>
        <option value = "2">2</option>
        <option value = "3">3</option>
        <option value = "4">4</option>
        <option value = "5">5</option>
        <option value = "6">6</option>
        <option value = "7">7</option>
        <option value = "8">8</option>
        <option value = "9">9</option>
        <option value = "10">10</option>
        <option value = "11">11</option>
        <option value = "12">12</option>
        <option value = "13">13</option>
        <option value = "14">14</option>
        <option value = "15">15</option>
        <option value = "16">16</option>
        <option value = "17">17</option>
        <option value = "18">18</option>
        <option value = "19">19</option>
        <option value = "20">20</option>
        <option value = "21">21</option>
        <option value = "22">22</option>
        <option value = "23">23</option>
        <option value = "24">24</option>
        <option value = "25">25</option>
        <option value = "26">26</option>
        <option value = "27">27</option>
        <option value = "28">28</option>
        <option value = "29">29</option>
        <option value = "30">30</option>
        <option value = "31">31</option>
      </select>
      <button id ="button" onclick = "getElementById('result').innerHTML = GetSign()">calculate!</button>
        <p id = "result"></p>

1 个答案:

答案 0 :(得分：0)

尝试一下。您可以在这里做一些更清洁的事情，但这将是解决当前问题的好方法。主要问题是您没有查看这些选择的值，而是让您的javascript指向了由这些选择的ID定义的变量，而不是值，因此未定义它们。

JS注释：

  • 在此处仅针对月份，日期和结果通知三个新的const，每个const指向其相应选择的ID。

  • 新JS中所有月份变量的通知现在都为“ month.value”

  • 通知的另一面是，与值比较的是月份的字符串，因为这是JS读取值的方式。 day的同一天现在是'day.value'并与一个数字进行比较，因为这就是JS将如何引入该值。

  • 您可以通过将符号定义为const并在if / else语句中使用它们，并在比较中使用这些const来使它更​​整洁，这只会使您的代码短一些，但是答案是on如何使你的工作。

HTML：

<select name="month" id="month">
			<option value="January" id="Jan">January</option>
			<option value="February" id="Feb">February</option>
			<option value="March" id="Mar">March</option>
			<option value="April" id="Apr">April</option>
			<option value="May" id="May">May</option>
			<option value="June" id="june">June</option>
			<option value="July" id="July">July</option>
			<option value="August" id="Aug">August</option>
			<option value="September" id="Sept">September</option>
			<option value="October" id="Oct">October</option>
			<option value="November" id="Nov">November</option>
			<option value="December" id="Dec">December</option>
		</select>
		<select name="day" id="day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
			<option value="12">12</option>
			<option value="13">13</option>
			<option value="14">14</option>
			<option value="15">15</option>
			<option value="16">16</option>
			<option value="17">17</option>
			<option value="18">18</option>
			<option value="19">19</option>
			<option value="20">20</option>
			<option value="21">21</option>
			<option value="22">22</option>
			<option value="23">23</option>
			<option value="24">24</option>
			<option value="25">25</option>
			<option value="26">26</option>
			<option value="27">27</option>
			<option value="28">28</option>
			<option value="29">29</option>
			<option value="30">30</option>
			<option value="31">31</option>
		</select>
		<button id="button">
			calculate!
		</button>
		<p id="result"></p>

JS：

const button = document.getElementById('button')
const month = document.getElementById('month')
const day = document.getElementById('day')
const result = document.getElementById('result')

function GetSign(Month, Day) {
	if (
		(month.value == 'March' && day.value >= 21) ||
		(month.value == 'April' && day.value <= 19)
	) {
		result.innerHTML = 'Aries'
	} else if (month.value == 'March' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'April' && day.value >= 20) ||
		(month.value == 'May' && day.value <= 20)
	) {
		result.innerHTML = 'Taurus'
	} else if (month.value == 'April' && day.value > 30) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'May' && day.value >= 21) ||
		(month.value == 'June' && day.value <= 21)
	) {
		result.innerHTML = 'Gemini'
	} else if (month.value == 'May' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'June' && day.value >= 22) ||
		(month.value == 'July' && day.value <= 22)
	) {
		result.innerHTML = 'cancer'
	} else if (month.value == 'June' && day.value > 30) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'July' && day.value >= 23) ||
		(month.value == 'August' && day.value <= 22)
	) {
		result.innerHTML = 'Leo'
	} else if (month.value == 'July' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'August' && day.value >= 23) ||
		(month.value == 'September' && day.value <= 22)
	) {
		result.innerHTML = 'virgo'
	} else if (month.value == 'August' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'September' && day.value >= 23) ||
		(month.value == 'October' && day.value <= 22)
	) {
		result.innerHTML = 'libra'
	} else if (month.value == 'September' && day.value > 30) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'October' && day.value >= 23) ||
		(month.value == 'November' && day.value <= 21)
	) {
		result.innerHTML = 'scorpio'
	} else if (month.value == 'October' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'November' && day.value >= 22) ||
		(month.value == 'December' && day.value <= 21)
	) {
		result.innerHTML = 'Sagittarius'
	} else if (month.value == 'November' && day.value > 30) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'December' && day.value >= 22) ||
		(month.value == 'January' && day.value <= 19)
	) {
		result.innerHTML = 'capricorn'
	} else if (month.value == 'December' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'January' && day.value >= 20) ||
		(month.value == 'February' && day.value <= 18)
	) {
		result.innerHTML = 'Aquarius'
	} else if (month.value == 'January' && day.value > 31) {
		result.innerHTML = 'invalid date'
	} else if (
		(month.value == 'February' && day.value >= 19) ||
		(month.value == 'March' && day.value <= 20)
	) {
		result.innerHTML = 'pisces'
	} else if (month.value == 'February' && day.value > 29) {
		result.innerHTML = 'invalid date'
	}
}
button.addEventListener('click', GetSign)

相关问题
最新问题