2017-01-07 3 views
0

입력 된 내용의 정보를 출력해야합니다. 한 명의 저자가있을 때 작동합니다. 저자를 추가하면 두 사람 모두에게 성을 부여합니다. 나는 세 번째 저자를 추가하여 첫 번째 저자 성을 부여한 다음 세 번째 저자 성을 두 번 - 첫 번째 저자, 두 번째 저자, 세 번째 저자의 성을 부여했습니다. 그래서 문제는 - 저자가 세 명일 때 저자의 성 (성)을 알려 주어야합니다. 첫 번째가 아니라 세 번째가 두 번입니다.if 문의 값

<!DOCTYPE HTML> 
<html lang='pl'> 
<head> 
    <meta charset='utf-8'> 
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> 
    <title>Robot naukowy</title> 
    <link rel='stylesheet' href='css/style.css'> 

    <!-- dynamic form - script --> 

    <script type="text/javascript"> 

    window.onload = Load; 
var numberOfAuthors = 0; 


function Load() 
{ 
    document.getElementById('add_input').onclick = AddElement; 
} 

function AddElement() 
{ 
    var element1 = document.createElement('input'); 
    var element2 = document.createElement('input'); 
    var element3 = document.createElement('input'); 
    var label1 = document.createElement('label'); 
    var label2 = document.createElement('label'); 
    var label3 = document.createElement('label'); 
    var button = document.createElement('input'); 

    var number = numberOfAuthors; 

    label1.innerHTML = "</br>Next Author's Name "+"</br>"; 
    label1.setAttribute('id', 'authorNameLabel' + number); 

    element1.setAttribute('type', 'text'); 
    element1.setAttribute('id', 'authorName' + number); 
    element1.setAttribute('placeholder', "author's name"); 
    label1.appendChild(element1); 

    label2.innerHTML = "</br>Next Author's Initials " + "</br>"; 
    label2.setAttribute('id', 'authorInitialsLabel' + number); 

    element2.setAttribute('type', 'text'); 
    element2.setAttribute('id', 'authorInitials' + number); 
    element2.setAttribute('placeholder', "Author's Initials..."); 
    label2.appendChild(element2); 

    label3.innerHTML = "</br>Next Author's surname" + '</br>'; 
    label3.setAttribute('id', 'authorSurnameLabel' + number); 

    element3.setAttribute('type', 'text'); 
    element3.setAttribute('id', 'authorSurname' + number); 
    element3.setAttribute('placeholder', "Author's surname..."); 
    label3.appendChild(element3); 

    button.setAttribute('onclick', 'removeAuthor(' + number + ')'); 
    button.setAttribute('type', 'button'); 
    button.setAttribute('id', 'removeAuthorButton' + number); 
    button.setAttribute('value', 'Button'); 

    document.forms['add_file'].appendChild(label1); 
    document.forms['add_file'].appendChild(label2); 
    document.forms['add_file'].appendChild(label3); 
    document.forms['add_file'].appendChild(button); 

    numberOfAuthors++; 
} 


function removeELement(id) { 
    var elem = document.getElementById(id); 
    return elem.parentNode.removeChild(elem); 
} 

function removeAuthor(authorId){ 
    removeELement("authorName"+authorId); 
    removeELement("authorInitials"+authorId); 
    removeELement("authorSurname"+authorId); 
    removeELement("removeAuthorButton"+authorId); 
    removeELement("authorNameLabel"+authorId); 
    removeELement("authorInitialsLabel"+authorId); 
    removeELement("authorSurnameLabel"+authorId); 
    numberOfAuthors--; 
    getText(); 
} 

function getText(){ 

    console.log(numberOfAuthors); 

    var div = document.getElementById("readyorder"); 

    var firstAuthorName = document.getElementById("firstAuthorName"); 
    var firstAuthorInitials = document.getElementById("firstAuthorInitials"); 
    var firstAuthorSurname = document.getElementById("firstAuthorSurname"); 
    // var secondAuthorSurname = 
    var authorSurname 


    for(var authorId = 0 ; authorId < numberOfAuthors ; authorId++){ 

     var authorName = document.getElementById("authorName"+authorId); 
     var authorInitials = document.getElementById("authorInitials" + authorId); 
     authorSurname = document.getElementById("authorSurname" + authorId); 


    } 

    var publisher = document.getElementById("publisher"); 

    var page = document.getElementById("page"); 

    var pageOther = document.getElementById("pageOther"); 
    var pageOtherValue = pageOther.value; 

    if(pageOther.value!=""){ 
     pageOtherValue = "-" + pageOther.value; 
    }else{ 
     pageOtherValue = ""; 
    } 

    var year = document.getElementById("year"); 
    var secondAuthorSurname; 
    if(authorId === 0) { 
     div.innerHTML = firstAuthorSurname.value + " (" + year.value + ", s."+page.value + pageOtherValue; 
    } 
    else if (authorId === 1) { 
     div.innerHTML = firstAuthorSurname.value + " and " + authorSurname.value + " (" + year.value + ") "; 

     //secondAuthorSurname = authorSurname.value; 
    } 

    else if (authorId === 2) { 
     div.innerHTML = firstAuthorSurname.value + ", " + authorSurname.value + " and " + authorSurname.value + " (" + year.value + ") "; 

    } 
} 

function handlePages(){ 

    var cboxPageRange = document.getElementById("cboxPageRange"); 

    if (cboxPageRange.checked){ 
     var pageOther = document.getElementById("pageOther"); 
     pageOther.style.display="block"; 
    }else{ 
     var pageOther = document.getElementById("pageOther"); 
     pageOther.style.display="none"; 
     pageOther.value=""; 
     getText(); 
    } 

} 



    </script> 



    </head> 
<body> 

<div class='container'> 

    <!-- header --> 
    <header> 
     <img src="images/header.jpg" alt=""/> 
    </header> 

    <!-- static form 1 --> 

    First Author's Name <br /> 
    <input type="text" id="firstAuthorName" /> <br /> 
    First Author's Initials <br /> 
    <input type="text" id="firstAuthorInitials" /> <br /> 
    First Author's Surname <br /> 
    <input type="text" id="firstAuthorSurname" /> <br /> 

    <!-- dynamic form --> 

<input type="submit" value="Add author" id="add_input" /> 

<form name="add_file" enctype="multipart/form-data" method="post"> 
</form> 



<div id="readyorder"></div><br/> 

    <!-- static form 2 --> 

     Publisher<br /> 
     <input type="text" id="publisher"><br /> 
     Page<br /> 
     <input type="text" id="page"> 
     <input type="checkbox" id="cboxPageRange" value="pageRangeCheckbox" onclick="handlePages()"> 
     <input type="text" id="pageOther" class="pageOther"> 
     <br> 
     Year<br> 
     <input type="text" id="year"><br/> 
     <input type="submit" value="Sprawdź" onclick="getText()" /> <br/><br/> 

     <!-- readyorder --> 

    <div id="readyorder"></div><br/> 

    <!-- sidebar --> 
    <aside> 
     <nav> 
      <ul> 
       <li><a href="index.html">Powrot do strony głownej</a></li> 
       <li><a href="#">Zmien styl</a></li> 

      </ul> 
     </nav> 
    </aside> 


    <!-- main --> 
    <section id="main"> 
     <h1> You made your order</h1><br/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum tempus mi, maximus volutpat urna sollicitudin vitae. Vivamus rutrum mi sit amet commodo rutrum. Suspendisse potenti. Sed a ullamcorper eros. Maecenas dapibus erat mi, a egestas ipsum cursus volutpat. Aliquam posuere mi at consectetur convallis. Cras vitae ligula eget leo ultrices hendrerit nec sed ex. Morbi at ipsum rhoncus, dictum elit in, consectetur lorem. Aliquam suscipit diam sit amet mauris luctus, a egestas magna pharetra. Donec laoreet viverra risus nec fermentum. Maecenas gravida lectus vel ante commodo bibendum. Donec ac pellentesque mi. </p> 
    </section> 

    <!-- footer --> 
    <footer> 
     <p>Lukasz © 2017</p> 
    </footer> 

</div> 

</body> 
</html> 
+0

정확히는 관련이 없지만 [루핑] (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code)은 몇 줄을 저장할 수 있습니다. – Teemu

답변

0

텍스트가 너무 많으면 답을 달 수 없습니다.

for(var authorId = 0 ; authorId < numberOfAuthors ; authorId++){ 

    var authorName = document.getElementById("authorName"+authorId); 
    var authorInitials = document.getElementById("authorInitials" + authorId); 
    authorSurname = document.getElementById("authorSurname" + authorId); 
} 

루프의 종료 후 마지막으로 (3) authorId의 값을 가질 것이다 authorName, authorInitialsauthorSurname이있을 것이다 :

당신이 여기 mistaked 보인다. 제 생각 엔, 당신은 루프를 너무 일찍 닫았습니다.