htmlのリスト作成、色反映とjavascriptでの動きについて

Question

HTML,javascriptを使ってリストの作成をしています。

動きとしては、
・＋を押すとテキスト、カラー、OKボタンの表示・非表示
・OKボタンでテキストボックスで入力した内容がリストとして追加される
・学校を押すと追加されたリスト含め全てが表示・非表示

やりたいこと
カラーを選択し、OKを押した際に追加されるリストの丸○に選択した色がつくようにしたい。

<ul>
 <li onclick="clickBtn2()">学校</li>
 <div id="school"><ul id="FavList">
  <script type="text/javascript" src="list.js"></script>
  <input type="text" id="favtext" style="display:none;">
  <input type="color" id="choicecolor" style="display:none;">
  <input type="button" id="addurl" value="OK" onclick="bar();" style="display:none;">
  <input type="image" src="orangebutton.png" alt="追加１" onclick="clickBtn1()">
 </ul></div>
</ul>			

//↓リストの追加オレンジ
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );
    newAnchor.setAttribute("target", "_blanc" );
   
    // li 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );
   
    // リストに追加
    var list = document.getElementById("FavList");
    list.appendChild( newLi );   
}

//↓オレンジボタン表示非表示
//初期表示は非表示
function clickBtn1(){
	const favtext = document.getElementById("favtext");
	const addurl = document.getElementById("addurl");
	const choicecolor = document.getElementById("choicecolor");

	if(favtext.style.display=="block"){
		// noneで非表示
		favtext.style.display ="none";
	}else{
		// blockで表示
		favtext.style.display ="block";
	}

	if(addurl.style.display=="block"){
		// noneで非表示
		addurl.style.display ="none";
	}else{
		// blockで表示
		addurl.style.display ="block";
	}

	if(choicecolor.style.display=="block"){
		// noneで非表示
		choicecolor.style.display ="none";
	}else{
		// blockで表示
		choicecolor.style.display ="block";
	}
}


//↓親要素表示非表示
function clickBtn2(){
	const school = document.getElementById("school");

	if(school.style.display=="block"){
		// noneで非表示
		school.style.display ="none";
	}else{
		// blockで表示
		school.style.display ="block";
	}
}


//色適応
var choicecolor = document.getElementById('choicecolor');
choicecolor.onchange = function () {
  document.getElementById('FavList').style.backgroundColor = this.value;
  console.log('choicecolor:'+this.value);
}

Comments

[thyda.eiqau]

使い古されたコピペですが、JavaとJavaScriptはインドとインドネシアくらい違います

[miyabi_pudding]

タイトルがjavaになってます。
javaとjavascriptは全く違うプログラミング言語なので、質問の修正をお願いします。
質問は編集できます。
また、タイトルには、質問要件を入れるようにしましょう。
今のままでは、何がわからないのかまったくわからず、見てもらえる可能性が低くなりますので。

[kei344]

（質問文は編集できます）質問するときのヒント（ https://teratail.com/help/question-tips ）を読んで、質問を改善しましょう。

Answer 1

ulの中に直接divやulをおいていますがNGです
もしやるなら学校の後ろの「</li>」を「</ul>」の直前に移動するとか？
（どういう構造にしたいのかわからないですが・・・）

Answer 2

HTMLの構造の問題は気になりますが今回の問題に直接影響していないっぽいので、指摘は他の方に任せつつ…。

単純に「色を選択しOKボタンを押すとリストの丸に色」について回答します。

先頭のリストマーク（●）は、一部ブラウザを除いてフォントの色と連動しますので、処理としては追加した <li> に対して style.color で choicecolorに格納された色を渡してあげる事で適用されます。

適用する場所は

// li 要素の作成
var newLi = document.createElement("li");
newLi.appendChild ( newAnchor );

の一番下に
newLi.style.color = document.getElementById('choicecolor').value;
※[追加したliのフォント色に(=)choicecolorに格納された色コードを指定] の意味

の処理を追記することで解決します。

質問者さんがJavaScriptの一番下で試行している //色適応 以下の5行の処理は、一旦消してから確認したほうが色の変化が見やすいと思います。

Comments

[asahinon]

無事実行できました。ありがとうございました！！

[iss]

解決できて良かったです！
yambejpさんが指摘したのHTML構造の話も、HTMLで処理を組んでいくうえで大切な問題なので参考にしてくださいね。

Answer 3

やりたいことが今一つつかめていませんが……

<script type="text/javascript" src="list.js"></script>
<ul>
  <li>
    <label>学校<input type="checkbox" onchange="clickBtn2(this.checked)" style="display: none;" checked></label>
    <div id="schoolListContainer">
      <label>
        <img src="./orangebutton.png">
        <input type="checkbox" id="isOpenAddSchoolForm" style="display: none;" onchange="clickBtn1(this.checked)">
      </label>
      <form id="addSchool" onsubmit="bar(); return false;" style="display: none;">
        <input type="text" id="favtext">
        <input type="color" id="choicecolor" onchange="onColorChange(this.value)">
        <input type="submit" id="addurl" value="OK">
      </form>
      <ul id="FavList"></ul>
    </div>
  </li>
</ul>

//↓リストの追加オレンジ
function bar() {
    const li = document.createElement('li');
    li.innerHTML = `<a target="_blank">${
      document.getElementById('favtext').value
    }</a>`;

    document.getElementById('FavList').appendChild(li);
}

//↓オレンジボタン表示非表示
//初期表示は非表示
function clickBtn1(toShow){
    document.getElementById('addSchool').style.display = toShow? 'block' : 'none';
}


//↓親要素表示非表示
function clickBtn2(toShow){
    document.getElementById('schoolListContainer').style.display = toShow? 'block' : 'none';
}


//色適応
function onColorChange(newColor) {
    document.getElementById('FavList').style.backgroundColor = newColor;
    console.log('choicecolor:', newColor);
}