Take value from a previous if statement

Question

I would need to keep the value from the previous if statement and then print the value from the previous if statement with the other name (but the same value) in the next if statement (authorId = 2).

I mean that I need to keep the value from the if statement (authorId === 1) and then print it out as another value in the next if statement (authorId = 2). So I need to keep authorSurname.value (id = 1) and print it in the if statement (authorId = 2) as the secondAuthor.value because in the if statement (authorId = 2) the string authorSurname takes another value. My code is:

Can you tell me how can I fix it?

 <!DOCTYPE HTML> 
<html lang='pl'> 
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
    <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 =   


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

        var authorName = document.getElementById("authorName"+authorId);
        var authorInitials = document.getElementById("authorInitials" + authorId);
        var 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 + ") states that, że  \".......\" " + ")"}

    else if (authorId === 1) {
           div.innerHTML = firstAuthorSurname.value + " i " + authorSurname.value + " (" + year.value + ") state that  \".......\";
           var secondAuthorSurname = authorSurname.value;
    }

        else if (authorId === 2) {
// I need to keep the value from authorSurname.value from the if statement above and use it as the secondAuthorSurname below 
//authorSurname takes different value because of the loop
            var secondAuthorSurname = authorSurname;
            div.innerHTML = firstAuthorSurname.value + ", " + secondAuthorSurname.value + " and " + authorSurname.value + " (" + year.value + ") state that  \".......\";

    }
}

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="check" onclick="getText()" /> <br/><br/>

       <!-- readyorder  -->

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

    <!-- sidebar --> 
    <aside>
        <nav>
            <ul>
                <li><a href="index.html">Main</a></li>
                <li><a href="#">Change style</a></li>

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


    <!-- main -->
    <section id="main">
        <h1>Take 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>Lorem Ipsum © 2017</p>
    </footer>

</div>

</body>
</html>

The `div.innerHTML = firstAuthorSurname.value + ...` in the last `if` block will never be executed — Andreas, Jan 03 '17 at 05:55
so do you want me to put return block after the div.inner.HTML? — lookasz, Jan 03 '17 at 06:00
Can you provide complete loop code and sample data for authorSurName. — Rajashekhar, Jan 03 '17 at 06:14

Ced · Answer 1 · 2017-01-05T17:46:14.877

An obvious thing wrong is this:

 else if (authorId === 2) {
     return secondAuthorSurname;
     div.innerHTML = firstAuthorSurname.value + "...blabla";
 }

What is under a return value won't be executed. However this barely makes sens and with the snippet you provided we are only left guessing.

 var secondAuthorSurname;

 if (authorId === 0) {
     div.innerHTML = firstAuthorSurname.value + "...blabla";
     secondAuthorSurname = "your desired return value";
 } else if (authorId === 1) {
     div.innerHTML = firstAuthorSurname.value + "...blabla"; 
     secondAuthorSurname = "your desired return value";
 }     else if (authorId === 2) {
         div.innerHTML = firstAuthorSurname.value + "...blabla";
         secondAuthorSurname = "your desired return value";
 }
 return secondAuthorSurname;

Also the var shouldn't be declared in the if block, it is not a good way of constructing your code and it is less readable and many people might expect it to be undefined/ReferenceError (even tho it isn't). Declare it above all this.

in the loop (authorId = 3)

What loop ?

Last edit I make:

1 . You should know that there are some basic concepts that you are lacking and that is clear in your code.

First if(){}else{} is not a loop it's a condition. A loop is something that has the possibility to run more than once, like while(){}.

Secundo, you are misunderstanding how var works. When you declare a var, it is declared in a scope.

if you do this:

var a = 2;
var b = 1;
function foo(){
   var a = 3;
   console.log(a); // 3
   console.log(b); // 1
}

first it tries to get a in the scope of foo, it finds it, so it prints 3. Then it tries to find b in foo scope, doesn't find it and ask the container scope which responds yes I have b, here it is 1.

You probably knew that though. What you don't know however is this:

function foo(){
   if(true){
      u = 1;
      console.log(u);
   }else{
      var u = 5;
   }
}
foo();

What do you think happens here ? Take a guess, try to think what happens behind the scene.

Here is what happens behind the scene:

function foo(){
   var u;
   if(true){
      u = 1;
      console.log(u);
   }else{
      u = 5;
   }
}
foo();

The var is put at the top before your code is executed. It is therefor good practice to put your variable declarations before the loops and not inside, because some people might think they are not declared (like in other programming languages).

That being said here is your question dumbed down :

var a = 0;
var b = 3;
if (authorId === 1) {
    a = 1;
}else if (authorId === 2) {
    // You are claiming that b changes because of the condition above
    // this is strictly impossible
}

If you enter the else block, then you didn't enter the if and vice versa. That's what it is used for. Therefor, there is no way if block has effect on your else block.

With everything I said you should see that you have many illogisme in your code.

for(var authorId = 0 ; authorId < numberOfAuthors ; authorId++ ){
    var authorName = document.getElementById("authorName"+authorId);
}

Here authorname will have the value from the last iteration of the loop. So when authorId is 0 it will be equal to the element with id "authorInitials0", then next iteration it will be replaced by "authorInitials1", and so on.

In other words you can replace it with a single line that'll have the same effect.

 var authorName = document.getElementById("authorName"+ (numberOfAuthors -1 ));

This makes little sens as well:

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

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

Take a deep breath, and relearn the basics, else you'll get stuck constantly. Also use "use strict" at the top of your js files.

well, could you change the code please? It still doesn't work — lookasz, Jan 04 '17 at 17:01
@lookasz I'd gladly help if you put the whole code. The whole function. And please format it so it's not hard to read. (like I did) — Ced, Jan 04 '17 at 17:02
Ok, I edited and put the whole code. Do you have any ideas? Thanks — lookasz, Jan 05 '17 at 16:21
Great thanks! Can you tell me why when I put 3 different surname into dynamic input fields it gives me the right first surname and then the third author's surname twice? — lookasz, Jan 05 '17 at 22:15
I'm sorry I cannot post another question until two days, can you help me with fixing the problem? — lookasz, Jan 05 '17 at 22:54

Take value from a previous if statement

1 Answers1