2017-01-07 15 views
0

入力文から情報を出力する必要があります。私が1人の著者を得たとき、それは働く。私は著者を追加すると、それは私に両方の姓を与えるので、その罰金。私は第3著者を追加して、最初の著者の姓と3番目の著者の姓を二度与えます。それは私に最初の著者、2番目の著者、3番目の著者の姓を与えることになっています。 問題は、私が3人の著者を迎えたとき、最初の人物ではなく、3人目の人物の2人の人物をすべて私に渡すべきです。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

[looping](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code)では、数行の節約が可能です。 – Teemu

答えて

0

テキストが多すぎるとコメントにはなりません。

あなたがここにmistakedようだ:

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

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

をループの終了後、あなたがauthorNameauthorInitialsauthorSurnameが最後(第3回)authorIdの値を持つことになりますがあります。私は、あなたがループを早く閉めたと思う。