前提・実現したいこと

現在制作しているページに下記の機能を実装したいと思っています。
・番号を指定すると、その<li>を削除する機能。
(1.りんごが入っていたとすると、1を入力すると該当する<li>が削除される仕組み)
・番号を指定すると、その<li>に入っている果物の名前だけを入力した値で置換する機能。
(1.りんごが入っていたとすると、1を入力し置換したい値に桃を入れて置換すると1.りんごが1.桃に置換される仕組み)
・リストの中の表示をHTML表記にする機能

悩んでいる部分

・番号を指定するとの２つが、どういう書き方をすればいいのか分からない。
・リストの中の表記をHTML表記に変更するコードですが、なぜ動かないのか分からない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <!--jqueryのファイルは省略-->
6        <style>
7            div
8            {
9                width:250px;
10                height:100px;
11                border:1px blue solid;
12                border-width: 3px;
13                overflow:auto;
14            }
15            #fruit,#numdel,#numrep,#repfruit
16            {
17                width: 100px;
18            }
19        </style>
20        <script>
21            function addition()
22            {
23                $("#viewer > ol:first").append($("<li>" + $("#fruit").val() + "</li>"));
24            }
25            function Eledelete()
26            {
27                // 入力した番号を代入
28                let inpNum = $("#numdel").val();
29            }
30            function Replacement()
31            {
32
33            }
34	        // リストのソースコードを表示
35            $("#sourcecode>div").val($("#viewer>ol").html());
36        </script>
37    </head>
38    <body>
39        <h1>果物の追加・削除</h1>
40        <div id="viewer">
41            <ol></ol>
42        </div>
43        <form>
44            <input type="text" id="fruit" />
45            <input type="button" onClick="addition()" value="果物を追加" /><br />
46            <input type="text" id="numdel" />
47            <input type="button" onClick="Eledelete()" value="番を削除" /><br />
48            <input type="text" id="numrep" />番に入っている果物を
49            <input type="text" id="repfruit" />
50            <input type="button" onClick="Replacement()" value="に置換" /><br />
51        </form>
52        <h1>ソースコードの表示</h1>
53        <div id="sourcecode">
54
55        </div>
56    </body>
57</html>

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じ。あとは調整してください

javascript
1<script>
2$(function(){
3  $('#add').on('click',function(){
4    if($('#fruit').val()){
5      $('#viewer ol').append($('<li>').text($('#fruit').val()));
6    }
7  });
8  $('#del').on('click',function(){
9    if($('#numdel').val()){
10      $('#viewer ol li').eq($('#numdel').val()-1).remove();
11    }
12  });
13  $('#replace').on('click',function(){
14    if($('#numrep').val() && $('#repfruit').val()){
15      $('#viewer ol li').eq($('#numrep').val()-1).text($('#repfruit').val());
16    }
17  });
18});
19</script>
20<div id="viewer">
21<ol></ol>
22</div>
23<form>
24<input type="text" id="fruit">
25<input type="button" id="add" value="果物を追加"><br>
26<input type="text" id="numdel">
27<input type="button" id="del" value="番を削除"><br>
28<input type="text" id="numrep">番に入っている果物を
29<input type="text" id="repfruit">
30<input type="button" id="replace" value="に置換"><br>
31</form>

ソース表示

javascript
1<script>
2$(function(){
3  $('#add').on('click',function(){
4    if($('#fruit').val()){
5      $('#viewer ol').append($('<li>').text($('#fruit').val()));
6      viewsource();
7    }
8  });
9  $('#del').on('click',function(){
10    if($('#numdel').val()){
11      $('#viewer ol li').eq($('#numdel').val()-1).remove();
12    }
13    viewsource();
14  });
15  $('#replace').on('click',function(){
16    if($('#numrep').val() && $('#repfruit').val()){
17      $('#viewer ol li').eq($('#numrep').val()-1).text($('#repfruit').val());
18    }
19    viewsource();
20  });
21  function viewsource(){
22    console.log(1);
23    $("#sourcecode").text($("#viewer>ol").html());
24  }
25});
26</script>
27<div id="viewer">
28<ol></ol>
29</div>
30<form>
31<input type="text" id="fruit">
32<input type="button" id="add" value="果物を追加"><br>
33<input type="text" id="numdel">
34<input type="button" id="del" value="番を削除"><br>
35<input type="text" id="numrep">番に入っている果物を
36<input type="text" id="repfruit">
37<input type="button" id="replace" value="に置換"><br>
38</form>
39<hr>
40<div id="sourcecode"></div>

投稿2021/11/19 04:32

編集2021/11/19 05:14

yambejp

総合スコア116724

martini777

2021/11/19 05:14 編集

1.りんご 2.ももと追加していくと、ソースコードの表示のところに <ol><li>りんご</li><li>もも</li></ol>と表記したいのですが、このコードのどの部分が間違っているのでしょうか。下記の部分です // リストのソースコードを表示 $("#sourcecode>div").val($("#viewer>ol").html());