※ ChatGPTを利用し、要約された質問です（原文：入力フォームの文字の大きさとフォント種類を表示させたい）
入力フォームの文字の大きさとフォント種類を表示させたい
このQ&Aのポイント
入力フォームの文字の大きさとフォント種類を確認ボタンで画面上に表示させる方法を知りたいです。
文字の大きさは反映されますが、フォントの種類は反映されません。フォントの種類も変更できるようにする方法を教えてください。
入力フォームの文字の大きさとフォント種類を変更できるようにし、選択した変更が画面上に反映されるようにしたいです。
入力フォームの文字の大きさとフォント種類を表示させたい
入力フォームの文字の大きさとフォント種類を
確認ボタンで画面上に表示させたいのですが、エラーになってしまいます。また、文字の大きさは反映されますが、フォントの種類は反映されません。どのようにすればいいでしょうか？
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
// フォームの文字の大きさと種類を変更
function sizeTxt(n){
document.nForm.textN.style.fontSize = n.options[n.selectedIndex].value + "px";
}
function fontTxt(n){
document.nForm.textN.style.fontFamily = n.options[n.selectedIndex].value;
}
function check(){
var strName;
strName = document.nForm.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
var strName2;
strName2 = document.nForm.textN.value;
var test2 = document.getElementById("test2");
test2.innerHTML = strName2;
var size = document.nForm.sizeSelect;
test.style.fontSize = size.options[size.selectedIndex].value + "px";
var element = document.nFORM.fontSelect;
test2.style.fontFamily = element.options[element.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nForm" >
フォントサイズを選択できます。<br>
<SELECT onChange="sizeTxt(this)" name="sizeSelect">
<OPTION value="8">8px</OPTION>
<OPTION value="10">10px</OPTION>
<OPTION value="12" selected>12px</OPTION>
<OPTION value="16">16px</OPTION>
<OPTION value="20">20px</OPTION>
<OPTION value="24">24px</OPTION>
<OPTION value="30">30px</OPTION>
</SELECT><br><br>
フォント種類を選択できます。<br>
<SELECT onChange="fontTxt(this)" name="fontSelect">
<OPTION value="ＭＳ ゴシック">ゴシック</OPTION>
<OPTION value="ＭＳ 明朝" selected>明朝</OPTION>
</SELECT><BR><BR>
<INPUT type="text" size="45" name="textN"><BR>
<input type="button" value=" 確認 " onClick="check()">
</FORM>
<DIV id="test" id="test2" id=text style="position:absolute;font-size:24px;font-family: Verdana, sans-serif;">
</DIV>
<SCRIPT language="JavaScript">
</SCRIPT>
</BODY>
</HTML>
お礼
早速のお答えありがとうございます。 試したところうまくいきました。 ありがとうございました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- // フォームの文字の大きさと種類を変更 function sizeTxt(n){ document.nform.textN.style.fontSize = n.options[n.selectedIndex].value + "px"; } function fontTxt(n){ document.nform.textN.style.fontFamily = n.options[n.selectedIndex].value; } function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; var size = document.nform.sizeSelect; test.style.fontSize = size.options[size.selectedIndex].value + "px"; var element = document.nform.fontSelect; test.style.fontFamily = element.options[element.selectedIndex].value; } --> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > フォントサイズを選択できます。<br> <SELECT onChange="sizeTxt(this)" name="sizeSelect"> <OPTION value="8">8px</OPTION> <OPTION value="10">10px</OPTION> <OPTION value="12" selected>12px</OPTION> <OPTION value="16">16px</OPTION> <OPTION value="20">20px</OPTION> <OPTION value="24">24px</OPTION> <OPTION value="30">30px</OPTION> </SELECT><br><br> フォント種類を選択できます。<br> <SELECT onChange="fontTxt(this)" name="fontSelect"> <OPTION value="ＭＳ ゴシック">ゴシック</OPTION> <OPTION value="ＭＳ 明朝" selected>明朝</OPTION> </SELECT><BR><BR><br> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" id=text style="position:absolute;font-size:24px;font-family: Verdana, sans-serif;"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> </BODY> </HTML>