Question

我需要从输入语句中打印出信息。当我得到一位作者时 - 它有效。当我添加作者时，它给出了两者的姓氏，所以很好。我添加了第三作者，它给了我第一个作者姓氏，然后第三个作者姓氏两次 - 它应该给我第一个作者，第二个作者，然后第三个作者的姓氏。所以问题是 - 当我有三位作者时，它应该给我所有的作者和＃39;姓氏，不是第一个，然后是第三个。

<!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>

Answer 1

太多的文字不适合评论，然后把它回答。

看来你错了：

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

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

在循环结束后，您将authorName，authorInitials和authorSurname的值为last（3rd）authorId。我想，你太早闭环了。

if语句中的值

1 个答案: