質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

入力テキストの文字数ソート機能と入力追加、削除のトラブル

cha-
cha-

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

9閲覧

投稿2020/11/24 19:22

<要望>
ユーザーが可変数の文字列に文字列を入力できるようにするJavaScriptアプリケーションを開発する
入力ウィジェット。ユーザーが文字列を入力すると、その長さが自動的に横に表示されます。
入力ウィジェット。インターフェイスを制御し、いくつかの機能を提供するためのボタンが用意されています。
•「セルの追加」ボタンをクリックすると、別の入力ウィジェットが追加されます。
•「セルの削除」ボタンをクリックすると、入力ウィジェットが削除され、常に少なくとも1つが残ります。
入力ウィジェット。
•「並べ替え」ボタンをクリックすると、表示されている文字列が並べ替えられます。
アプリケーションを3つのファイルに編成します。次の3つのファイルへのユーザーインターフェイスであるHTMLファイル
応用;ほとんどのJavaScriptコードを含むファイル。スタイリングルールを含むファイル。
1.シンプルなスタイリングの基本画面
A.目に見えるコンポーネントをほぼ中央に配置するスタイリングを提供します。また、変更します
背景のデフォルトの色。
2.セルの追加/セルの削除
A.ユーザーの便宜のために、アプリケーションは入力された文字列を記憶します。
ウィジェットが削除された後でもウィジェット。
B.ウィジェットが再度追加されると、保存された値がに表示されます。
ウィジェット。
3.入力と長さ
A.ユーザーがキーを入力するたびに、キーはそれぞれの文字列の長さをチェックして表示します
次のウィジェット(リアルタイムで)。
4.並べ替え
A.保存された文字列は、表示されていない場合、ソート操作に参加しないことに注意してください。
B.配列sort()メソッドを使用できます。
イメージ説明
イメージ説明
イメージ説明
イメージ説明

<問題点>
addボタンを押すとinput text が増えて、removeボタンを押すと、input textが消えるコードを書いたのですが、増えると、ボタンをまたいでしまうので、空欄テキストが増えると同時にボタンも下にずれるようにしたいのです。
イメージ説明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rj's Awesome JS App</title> </head> <!-- use background-color property of css to set the background color --> <body style="background-color: grey"> <!-- create a main inside which other elements exists --> <div id="mainDiv"> <!-- use border, margin, width and height to give the required shape --> <div id="inp-wrap" style="margin: auto;border-style: solid;width: 50%;height: 50%;"> <!-- make labels to show the headings --> <label style="margin-left: 18%">Input</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label >Length</label> <!-- this is the div in which our elements will be repeated/cloned --> <!-- use a placeholder _0 to show the index --> <div id="insideDiv_0"> <p style="margin-left: 12%"><input type="text" id="inputString_0" oninput="setLength(event)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="length_0">0</span></p> </div> <!-- add a margin --> <div style="margin-left: 20%;width: 50%"> <button type="button" id="add-cell" onclick="addCell()">Add Cell</button> <button type="button" id="remove-cell" onclick="removeElement()">Remove Cell</button> <button type="button" id="sort">Sort</button> </div> </div> </div> <script type="text/javascript" src="index.js"></script> </body>// a global variable to hold the current index of input element var index = 0; // a global array to hold the input strings var inputValues = []; // function to add the cell/element function addCell(){

// increment the index
index++;

// use cloneNode of javascript to make a clone
let clone = document.querySelector('#insideDiv_0').cloneNode( true );

// logic to add a new element

let id = clone.id;
let currentIndex = id.substring(id.indexOf("_")+1);

clone.id = 'insideDiv_' + index;

// check if the value of input to be added alredy exists in the global array
if(inputValues.length > index){
clone.getElementsByTagName('input')[0].value = inputValues[index];
clone.getElementsByTagName('span')[0].innerText = inputValues[index].length
}
else{
clone.getElementsByTagName('input')[0].value = '' ;
clone.getElementsByTagName('span')[0].innerText = '0'
}

// set the id as per the current index
clone.getElementsByTagName('input')[0].id = 'inputString_' + index

clone.getElementsByTagName('span')[0].id = 'length_' + index

// apend the element as child element
document.querySelector('#inp-wrap').appendChild( clone );

}

// function to set the length of inputstring
function setLength(e){

let id = e.srcElement.id;
let currentIndex = id.substring(id.indexOf("_")+1);
let inptSt = document.querySelector('#'+id).value.length;
let spanId = e.srcElement.nextElementSibling.id;
//check if it is a current index or not
if(inputValues.length > currentIndex){
inputValues[currentIndex] = document.querySelector('#'+id).value;
}
else{
inputValues.push(document.querySelector('#'+id).value);
}

let spanEl = document.getElementById(spanId);
// set the length in span element
spanEl.innerText = inptSt;

}

// function to remove the element the update the index value
function removeElement(){

let currentId = 'insideDiv_' + index ;
let inptSt = document.querySelector('#'+currentId);
inptSt.remove();
index--;
}

</html>

しかも、左側のリスト数字が表示されないので、連番で数字だけ(.なしで)表示してほしいです。
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。