submitボタンを押してリストを追加していくという作業を行っているのですがif文内でidを宣言することは可能なのでしょうか。if文にlistitemにidを持たせる機能を持たせたいです。指示に従いコードを書いてみましたがsubmitが機能しません。おそらくコードの書き方が違うのだと思うのですがvar以外に指示通りの宣言をする方法が見つけられませんでした。
最終的にはsubmitした内容がリストに追加され5つになったところでThanks for your suggestionsというメッセージが表示されます。上記の質問及びsubmitを機能させるための解決策をご回答よろしくお願いします。
指示:
3. Within the script section create two global variables:one named i with a value of 1,
and the other named listItem with its value set to an empty string.
(script内にiという値1の変数とlistitemという空の変数をおく。)
4. Below the variables, create a function called processInput(). Within the function,
create an if statement that runs if the value of i is less than or equal to 5. The if
statement should perform the following actions:
(3.の変数の下にprocessInputというfunctionをおき、funxtion内にiが5以下の場合に動くif文をおく。)
a. set the value of listitem variable to the string "item" concatenated with the value of i.
(iの値に連結された文字列”item”に変数listitemをおく)
b. Set the content of the element with an id equal to listItem to the value of the
element with the id of toolbox.
(listitemと同じidをもつ要素をtoolboxのidを持つ要素の値に設定する)
c. Set the value of the element with the id of toolbox to an empty string.
(toolboxのidをもつ要素を空の文字列に設定する)
5.Before the closing }of the if statement, create a nested if statement. If the value of
1 is equal to 5, the statement should change the content of the element with the id of
resultsExpl to the string "Thanks for your suggestions.”
(if文内にもう一つif文を設ける。i<=5の時、resultsExplの内容を”Thanks for your suggestions." に変更する)
6.Before the closing }of the main if statement, after the nested if statement, add a
statement to increment the value of i by 1.
(4で作成したif文内にiの値を1つずつ増やすという指示をおく)
7. Add a backward-compatible event listener for the click event to the Submit button
(with the id of button).
(下位互換性のあるイベントリスナーをbuttonのidを持つSubmitボタンのclickイベントに追加する)
<body>
<header>
<h1>
Hands-on Project 3-4
</h1>
</header>
<article>
<div id="results">
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
<p id="resultsExpl"></p>
</div>
<form>
<fieldset>
<label for="toolBox" id="placeLabel">
Type the name of a tool, then click Submit:
</label>
<input type="text" id="toolBox" />
</fieldset>
<fieldset>
<button type="button" id="button">Submit</button>
</fieldset>
</form>
</article>
<script>
var i=1;
var listitem = {};
var button = document.getElementById("button")
function processInput(){
if(i<=5){
var listitem = "item" + "i";
<listitem id="placeLabel";>
var placeLabel={};
if(i=5){
var resultsExpl= "Thanks for your suggestions."
}
for(i=0; i<=5; i++){};
}
}
button.addEventListener("click", function(){
document.myform.submit;
})
</script>
</body>
</html>