Why doesn't this work with document.write in a html file?


#1



https://www.codecademy.com/en/courses/javascript-beginner-en-3bmfN/0/1?curriculum_id=506324b3a7dffd00020bf661


So Isn't this html file supposed to yield the same result as I run it with console.log? Why does it just give [Object object] when I run it on a web browser? What's the difference?


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
};



var search = function(name) {
  for(var prop in friends) {
  
    if(friends[prop].firstName === name) {
      document.write(friends[prop]); //(instead of console.log)
      //return friends[prop];
    }
  }
};
search("Bill");
</script>

</body>
</html>


#2

For starters it may have to do with the fact that document.write() takes a string, not an object.


#3

@bitsolver36591
What @mtf meant
you would have to use something like

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var friends = {};
friends.bill = {
  firstName: "Bill",
  lastName: "Gates",
  number: "(206) 555-5555",
  address: ['One Microsoft Way','Redmond','WA','98052']
};
friends.steve = {
  firstName: "Steve",
  lastName: "Jobs",
  number: "(408) 555-5555",
  address: ['1 Infinite Loop','Cupertino','CA','95014']
};

var search = function(name) {
  for(var prop in friends) {
  
    if(friends[prop].firstName === name) {
	  //short-cut found-friend (ff)
	  var ff = friends[prop];
      document.write("<p>"+ff["firstName"]+" "+ ff["lastName"]+"</br>"+
	  "address: "+ff["address"]+"</p>"); 
	  //(instead of console.log)
      //return friends[prop];
    }
  }
};
search("Bill");
</script>

</body>
</html>

Having such a problem i would Always try to find a solution
google search
== discussions / opinions ==
document.write not functioning site:stackoverflow.com


#4

@bitsolver36591,
And here a basic construct with input, output & little-style

<!DOCTYPE html>
<head><title>Rock,Paper,Scissors!</title>
<style>
h2 {
    font-family:arial;
}
div {
   border: 1px solid black;
   height:20px;
   width:180px;
   text-align:center;
   }

form {
    display: inline-block;
}

#button {
    display: inline-block;
    height:20px;
	width:170px;
	background-color:#cc0000;
	font-family:arial;
	font-weight:bold;
	color:#ffffff;
	border-radius: 5px;
	text-align:center;
	margin-top:2px;
}

.list {
	font-family:garamond;
	color:#cc0000;
}
.uC {
   background-color:red;
  }
.cC {
   background-color:white;
  }
.result {
   background-color:blue;
  }

</style>
</head>

<body>
<!-- from Jquery - Modifying HTML Elements - 11. Click Da Button! Do It Naoughw! -->
</!-->
		<h2>Rock Paper Scissors</h2>
		<h5>Give your Choice (rock, paper, scissors)</h5>
		<form name="checkListForm">
			<input type="text,reset" name="checkListItem"/>
		</form>
		<div id="button">Show a Result</div>
		<br/>
		<div class="list" style="opacity: 0"></div>

  <div class="uC"></div>
  <div class="cC"></div>
  <div class="result"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
  
//var userChoice = prompt("Do you choose rock, paper or scissors?");
var main = function() {
 $('#button').click( function() {
     var userChoice = $('input[name=checkListItem]').val();
     var computerChoice = Math.random();
     if (computerChoice < 0.34) {
         computerChoice = "rock";
     }
	 else if(computerChoice <= 0.67) {
         computerChoice = "paper";
     }
	 else {
         computerChoice = "scissors";
     }

     var compare = function(choice1, choice2) {
        if (choice1 === choice2) {
            return "The result is a tie!";
        }
	else if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "Rock wins";
            } 
			else {
                return "Paper wins";
			}
        }
	else if (choice1 === "paper") {
            if (choice2 === "rock") {
                return "Paper wins";
            } 
			else {
                return "Scissors wins";
			}
        }


	else if (choice1 === "scissors") {
            if (choice2 === "rock") {
                return "Rock wins";
            } 
			else {
                return "Scissors wins";
			}
		}
	}


  var result = compare(userChoice, computerChoice);
//   var docString= "<p>User: " + userChoice + "</p>" + 
//                  "<p>Computer: " + computerChoice + "</p>"+
//				  "<p>Result: " + result + "</p>"
//   document.write( docString);
  $('.uC').text("userChoice: " + userChoice);
  $('.cC').text("computerChoice: " + computerChoice);
  $('.result').text("Result: " + result);
  $('input[name=checkListItem]').val("");
   });
  };
  $(document).ready(main);
</script>

</body>
</html>