teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ちょうせい

2021/11/19 05:14

投稿

yambejp
yambejp

スコア117914

answer CHANGED
@@ -31,4 +31,48 @@
31
31
  <input type="text" id="repfruit">
32
32
  <input type="button" id="replace" value="に置換"><br>
33
33
  </form>
34
+ ```
35
+
36
+ # ソース表示
37
+ ```javascript
38
+ <script>
39
+ $(function(){
40
+ $('#add').on('click',function(){
41
+ if($('#fruit').val()){
42
+ $('#viewer ol').append($('<li>').text($('#fruit').val()));
43
+ viewsource();
44
+ }
45
+ });
46
+ $('#del').on('click',function(){
47
+ if($('#numdel').val()){
48
+ $('#viewer ol li').eq($('#numdel').val()-1).remove();
49
+ }
50
+ viewsource();
51
+ });
52
+ $('#replace').on('click',function(){
53
+ if($('#numrep').val() && $('#repfruit').val()){
54
+ $('#viewer ol li').eq($('#numrep').val()-1).text($('#repfruit').val());
55
+ }
56
+ viewsource();
57
+ });
58
+ function viewsource(){
59
+ console.log(1);
60
+ $("#sourcecode").text($("#viewer>ol").html());
61
+ }
62
+ });
63
+ </script>
64
+ <div id="viewer">
65
+ <ol></ol>
66
+ </div>
67
+ <form>
68
+ <input type="text" id="fruit">
69
+ <input type="button" id="add" value="果物を追加"><br>
70
+ <input type="text" id="numdel">
71
+ <input type="button" id="del" value="番を削除"><br>
72
+ <input type="text" id="numrep">番に入っている果物を
73
+ <input type="text" id="repfruit">
74
+ <input type="button" id="replace" value="に置換"><br>
75
+ </form>
76
+ <hr>
77
+ <div id="sourcecode"></div>
34
78
  ```