javascriptで未入力項目を非表示にしたい
javascript学習中で、javascriptで西暦を和暦にするコードを作成しています。
最初未入力結果消したかったのでをdisplay:noneで非表示にしたのはいいんですけど、未入力の状態でボタンを押してしまうと初期状態の『明治33年月日』だけ表示されてしまうのでこちらをどうにかしたいんですけど何か方法はありますか？
解決方法をございましたら教えていただきたいです。
自分で試したこと
「未入力 非表示 javascript」などで変換しても解決したい記事などがみあたらなかったので質問させていただきます(>_<)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>カレンダー</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<script src="document.js"></script>
<div class="first-wrapper">
<div class="first-section">
<p><input type="number" name="year" id="year" min="1868" max="2055" step="1" / required>年</p>
<p><input type="number" name="month" id="month" min="1" max="12" step="1" /required>月</p>
<p><input type="number" name=day" id="day" min="1" max="31" step="1" /required>日</p>
</div>
</div>
<button>和暦に変換</button>
<div class="second-wrapper">
<div id="second-section">
<p><span id="year1" ></span>年</p>
<p ><span id="month1"></span>月</p>
<p><span id="day1"></span>日</p>
</div>
</div>
</body>
.section {
display: inline-grid;
}
input#input1 {
width: 40px;
}
input#input2 {
width: 40px;
}
input#input3 {
width: 40px;
}
.first-section {
display: flex;
}
.second-section {
display: flex;
}
div#second-section {
display: flex;
}
.second-wrapper{
display: none;
}
function convertYearToJapaneseEra(year)
//年を日本の元号に変換する
{
let m = new Date(year, 0, 1);
// e.g. "2022-01-01"
let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'short'});
//Intl.DateTimeFormatで言語に応じた日時のフォーマットを作る(日本語で和暦指定)
//ja-JP-u-ca-japaneseで日本語と和暦に対応させる
var [{ value: era }, { value: year},{ month: long}] = dt.formatToParts(m);
// e.g. {type: 'era', value: '令和'},{type: 'year', value: '4'},{type: 'literal', value: '年'}
//{type:'month',value:'4'}
for(let i=0;i<3;i++){
console.log({ value: era }, { value: year},{ value:month}[i]);
};
let str = era + year;
return str ;
// e.g. "令和4"
}
$(function(){
$("#year").on("input change",function(){
let year = $(this).val();
let yearJp = convertYearToJapaneseEra(year);
$("#year1").text(yearJp);
}).change();
$("#month").on("input change",function(){
let month = $(this).val();
$("#month1").text(month);
}).change();
$("#day").on("input change",function(){
let day = $(this).val();
$("#day1").text(day);
}).change();
});
$(function () {
$('button').on('click', () => {
$('.second-wrapper').fadeToggle();
});
});
0
