在html div中显示函数的结果

时间:2019-07-13 09:17:20

标签: javascript

我是javascript的新手,我正在尝试创建一个Web应用程序,该应用程序允许用户输入他们的出生日期,并且作为回报,它会根据一周中的某天返回他们的加纳名字。

我尝试了一篇文章的一些答案,但结果均相同,但无法达到目的。 document.getElementById();

var male = ["Kwasi", "Kwadwo", "Kwabena", "Kwaku", "Yaw", "Kofi", "Kwame"];
var female = ["Akosu", "Adwoa", "Abenaa", "Akua", "Yaa", "Afua", "Ama"];
var dayOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednsday", "Thursday", "Friday", "Saturday"];
var dayCalculate = parseInt(((CC / 4) - 2 * CC - 1) + ((5 * YY / 4)) + ((26 * (MM + 1) / 10))) % 7;
var gender = document.getElementById('genders').value;
var gender;

if (document.getElementById('male').checked) {
  gender = document.getElementById('male').value;

} else if (gender = document.getElementById('female').checked) {
  gender = document.getElementById('female').value;

  alert(" Since you were born on " + dayOfTheWeek + " Your name is " + female);
}
}
document.getElementById('result').innerHTML = dayOfTheWeek;
<form id="myform">
  <input type="date" id="birth" />
  <div class="input" id="genders">
    <input type="radio" id="female" name="female" value="female">Female
    <input type="radio" id="male" name="male" value="male">Male
  </div>
  <input type="submit" value="Submit" id="submitButton" onsubmit=a kanName(); />
</form>

我希望看到一个警报,其中会显示生日,然后在HTML的空div中写入用户阿肯名称。 这是我得到的Uncaught ReferenceError: akanName is not defined

错误

3 个答案:

答案 0 :(得分:0)

很遗憾,CC在您的代码中未定义,并且不清楚要实现的目标。这可以解决您犯的一些基本错误:

var male = ["Kwasi", "Kwadwo", "Kwabena", "Kwaku", "Yaw", "Kofi", "Kwame"];
var female = ["Akosu", "Adwoa", "Abenaa", "Akua", "Yaa", "Afua", "Ama"];
var dayOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednsday", "Thursday", "Friday", "Saturday"];
// var dayCalculate = parseInt(((CC / 4) - 2 * CC - 1) + ((5 * YY / 4)) + ((26 * (MM + 1) / 10))) % 7;
var gender = document.getElementById('genders').value;
var gender;

myform.addEventListener('submit', function akaName(event) {
  event.preventDefault(); // prevents the submitting of the form, which would reload the page
  const birthDay = new Date(birth.value).getDay();
  if (document.getElementById('male').checked) {
    gender = document.getElementById('male').value;

  } else if (document.getElementById('female').checked) {
    gender = document.getElementById('female').value;
    alert(" Since you were born on " + dayOfTheWeek[birthDay] + " Your name is " + female[birthDay]);
  }
  document.getElementById('result').innerHTML = female[birthDay];
});
<form id="myform">
  <input type="date" id="birth" />
  <div class="input" id="genders">
    <input type="radio" id="female" name="sex" value="female">Female
    <input type="radio" id="male" name="sex" value="male">Male
  </div>
  <input type="submit" value="Submit" id="submitButton" />
</form>

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

答案 1 :(得分:0)

有一些未定义的变量,例如

CC
YY
MM

在您的代码上,传递适当的变量 我已经根据您的代码创建了一个工作函数

function akanName(){
    var male = ["Kwasi", "Kwadwo", "Kwabena", "Kwaku", "Yaw", "Kofi", "Kwame"];
    var female = ["Akosu", "Adwoa", "Abenaa", "Akua", "Yaa", "Afua", "Ama"];
    var dayOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednsday", "Thursday", "Friday", "Saturday"];
    let CC=4;
    let YY=2002;
    let MM=3;
    var dayCalculate = parseInt(((CC / 4) - 2 * CC - 1) + ((5 * YY / 4)) + ((26 * (MM + 1) / 10))) % 7;
    var gender = document.getElementById('genders').value;
    var gender;
    
    if (document.getElementById('male').checked) {
      gender = document.getElementById('male').value;
    
    } else if (gender = document.getElementById('female').checked) {
      gender = document.getElementById('female').value;
    
      alert(" Since you were born on " + dayOfTheWeek + " Your name is " + female);
    }
    
    document.getElementById('result').innerHTML = dayOfTheWeek;
    }
    <div id="result">
    
    </div>
    <div id="myform">
      <input type="date" id="birth" />
      <div class="input" id="genders">
        <input type="radio" id="female" name="female" value="female">Female
        <input type="radio" id="male" name="male" value="male">Male
      </div>
      <input type="submit" value="Submit" id="submitButton" onclick="akanName();" />
    </div>

答案 2 :(得分:0)

function akanName() {

  var input = document.getElementById('birth').value;
  var d = new Date(input);
  var CC, MM, YY;
  if (!!d.valueOf()) {
    YY = d.getFullYear();
    MM = d.getMonth();
    CC = d.getDate();
  } else { /* Invalid date */ }
  var male = ["Kwasi", "Kwadwo", "Kwabena", "Kwaku", "Yaw", "Kofi", "Kwame"];
  var female = ["Akosu", "Adwoa", "Abenaa", "Akua", "Yaa", "Afua", "Ama"];
  var dayOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednsday", "Thursday", "Friday", "Saturday"];
  var dayCalculate = parseInt(((CC / 4) - 2 * CC - 1) + ((5 * YY / 4)) + ((26 * (MM + 1) / 10))) % 7;
  dayCalculate = dayCalculate - 1;
  var gender = document.getElementById('genders').value;
  console.log(dayCalculate);
  if (document.getElementById('male').checked) {
    gender = document.getElementById('male').value;
    alert(" Since you were born on " + dayOfTheWeek[dayCalculate] + " Your name is " + male[dayCalculate]);

  }
  if (document.getElementById('female').checked) {
    gender = document.getElementById('female').value;
    alert(" Since you were born on " + dayOfTheWeek[dayCalculate] + " Your name is " + female[dayCalculate]);
  }
  document.getElementById('result').innerHTML = dayOfTheWeek[dayCalculate];
}
<form id="myform">
  <input type="date" id="birth" />
  <div class="input" id="genders">
    <input type="radio" id="female" name="gender" value="female">Female
    <input type="radio" id="male" name="gender" value="male">Male
  </div>
  <input type="button" value="Submit" id="submitButton" onclick="akanName()" />
  <div>Result:<span id="result"></span></div>
</form>