생성 된 입력 요소 정보를 NodeList에 저장 한 다음 for 루프를 사용하여 정렬합니다.

달성하려는 작업은 사용자 클릭 버튼 하나가 있고 텍스트 필드가 만들어지고이 버튼은 3 번 푸시되고 3 개의 텍스트 필드가 나타납니다. 각 텍스트 필드가 나타날 때 사용자는 각 텍스트 필드에 텍스트를 입력해야합니다. 모든 텍스트 필드가 사용자에 의해 채워지면 두 번째 버튼이 클릭됩니다. 수동으로 입력 된 입력 필드 텍스트를 보나 피드 노드 목록에 사전 순으로 표시하고 정렬해야합니다.생성 된 입력 요소 정보를 NodeList에 저장 한 다음 for 루프를 사용하여 정렬합니다.

(ARRAY가 아님) nodelist이어야합니다. 각 입력 필드는 버튼 #1을 누를 때 만들어집니다. 그런 다음 사용자가 입력 한 정보가 #2 버튼을 누를 때 표시되고 정렬됩니다. for-loop은 nodelist의 각 요소 값을 검색하고 각 값을 새 listItemValues 배열의 요소에 저장하는 데 사용해야합니다.

감사합니다.

javascript

: 나는 당신의 코드를 일부 변경 한

var $ = function (id) { 
return document.getElementById(id) 
} 

var adding = function() { 
    var newInput = document.createElement("input"); 
    var newBreak = document.createElement("br"); 
    var myparent = $("todolist"); 

    newInput.setAttribute("title", "text"); 
    newInput.setAttribute("class", "listitem"); 
    myparent.appendChild(newInput); 
    myparent.appendChild(newBreak); 
}; 

var sorting = function() { 
    var display = ""; 
    var listItemValues = document.getElementsByTagName("input"); 

    for (i = 1; i <= listItemValues.length; i++) 
    var myItem = $("additem") + i; 
    var myItemName = (myItem).value; 
    display += myItemName; 
} 

window.onload = function() { 
    $("additem").onclick = adding; 
    $("sortitems").onclick = sorting; 
}

출처

2017-11-20 TRS7

@ 대니 페이디 존 스턴 버뮤 데즈 : 여기에 뭔가 게시 했습니까? – TRS7

예, 롤백했습니다. –

코드에 몇 가지 문제가 있습니다. '$ ("todolist")'와'$ ("additem")'에'#'을 추가해야합니다.순수한 ** JavaScript ** 또는 ** jQuery **를 사용할 지 확신하지 못합니다. 또 다른 에러는'$ ("additem"). onclick = adding;', 당신은'$ ("additem"). on ("click", 덧셈),'및'$ ("sortitems")으로 대체해야한다. = 정렬;'$ ("sortitems"). on ("클릭", 정렬); –

는 그것을 완전히 javascript 솔루션을 확인합니다.

document.getElementById 및 document.createElement의 반복 구문 사용을 줄이려면. 나는 2 Function Declarations을 가지고 : 당신이 Add Item 버튼을 클릭 입력 유형을 설정하는 newInput.type = "text"; :

function id(id) { 
    return document.getElementById(id); 
} 

function ce(el) { 
    return document.createElement(el); 
}

다른 변화는 내가 추가 한 Function Expressionadding()입니다. Function Expressionsorting()에서

내가 선언했습니다 의

nodeList = document.querySelectorAll("input[type=text]");

document.querySelectorAll() 방법은 문서 내에서 요소의 목록을 반환합니다 (사용하여 깊이 우선 예약 주문 탐색 문서의 노드)를 지정합니다. 개체는 NodeList입니다.

마지막으로 함수 식 printSortedValues()을 작성하여 <p id="displayitems"></p>에 정렬 된 값을 인쇄했습니다. 이 함수에서는 Array.prototype.sort()을 사용하여 값을 오름차순으로 정렬합니다. 이 같은

var printSortedValues = function(listItemValues) { 
    listItemValues.sort(); // Sorting the values. 

    var html = "", i, len = listItemValues.length; 
    for (i = 0; i < len; i++) { 
    html += "<span>"; 
    html += listItemValues[i]; 
    html += "</span>"; 
    } 
    return html; // Return the html content with the sorted values. 
};

뭔가 :이 도움이

function id(id) { 
 
    return document.getElementById(id); 
 
} 
 

 
function ce(el) { 
 
    return document.createElement(el); 
 
} 
 
var adding = function() { 
 
    var newInput = ce("input"), newBreak = ce("br"), myparent = id("todolist"); 
 

 
    newInput.setAttribute("title", "Some title..."); 
 
    newInput.setAttribute("class", "listitem"); 
 
    newInput.type = "text"; 
 
    myparent.appendChild(newInput); 
 
    myparent.appendChild(newBreak); 
 
}; 
 

 
var sorting = function() { 
 
    var listItemValues = [], nodeList = document.querySelectorAll("input[type=text]"), i, len = nodeList.length, node; 
 
    for (i = 0; i < len; i++) { 
 
    node = nodeList[i]; 
 
    listItemValues.push(node.value); // Store its values. 
 
    } 
 
    id("displayitems").innerHTML = printSortedValues(listItemValues); 
 
}; 
 

 
var printSortedValues = function(listItemValues) { 
 
    listItemValues.sort(); // Sorting the values. 
 

 
    var html = "", i, len = listItemValues.length; 
 
    for (i = 0; i < len; i++) { 
 
    html += "<span>"; 
 
    html += listItemValues[i]; 
 
    html += "</span>"; 
 
    } 
 
    return html; // Return the html content with the sorted values. 
 
}; 
 

 
window.onload = function() { 
 
    var additem = id("additem"), sortitems = id("sortitems"); 
 
    additem.onclick = adding; 
 
    sortitems.onclick = sorting; 
 
};

#displayitems span { 
 
    border: solid 1px #ccc; 
 
    border-radius: 5px; 
 
    display: block; 
 
    margin: 2px 0; 
 
    padding: 4px; 
 
}

<body> 
 
    <h1>ToDo List - Date: <span id="today">&nbsp;</span></h1> 
 
    <div id="todolist"> 
 
    <p> 
 
     <input type="button" id="additem" value="Add Item"> 
 
    </p> 
 
    </div> 
 
    <hr> 
 
    <div> 
 
    <p> 
 
     <input type="button" id="sortitems" value="Sort and Display Items"> 
 
    </p> 
 
    <p id="displayitems"></p> 
 
    </div> 
 
</body>

희망.

출처

2017-11-20 15:42:15

생성 된 입력 요소 정보를 NodeList에 저장 한 다음 for 루프를 사용하여 정렬합니다.

답변

관련 문제