Skip to main content
M
matildabishop
Participant
August 27, 2021
Question

Trouble using the For Statement, with Input and Tables

  • August 27, 2021
  • 2 replies
  • 201 views

Hi there,

 

I'm having a bit of trouble with a few elements within my Dreamweaver site file code.

I am aiming to create a website where prompts pop up, asking for the user for feedback. The feedback that the user gives will then be planted within a Javascript Table, with 3 columns and 6 rows (therefore the prompt must pop up 5 times for input). If the user does not enter anything into the prompt, the table must display a message.

 

Unfortunately, my 'For' statement, prompts and table are not cooperating. I've been trying to figure it out all day but have had no choice but to turn to the forum. My questions are posted below;

 

1. How do get input from the prompts to show up within the table that I have designed? Is there a reason why my 'For' statement is not currently working?

2. In the past I have practiced using the prompt, and when 'cancelling', it typically just places 'null' into my table. Is there a way I can replace the word/result 'null' with a phrase saying the user was unsuccessful?

 

Thank you for all of your help, in advance.

(Photos attached below)

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    August 27, 2021

    See if the below code helps. I also echo what Birnou says about using prompt BUT I dont know what it is you are doing. Javascript doesnt retain any information unless you use local storage i.e., when the page is refreshed the information has gone.

     

    The method below uses 3 seperate floated table side by side for the 'Departures', 'Destinations' & 'Airfares' nested in a main table. It does what you want but I have no idea what use it would be.

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flights</title>
<style>
.flightInfoWrapper {
width: 50%;
margin: 0 auto;
}
.flightInfoWrapper h1 {
margin: 0 0 20px 0;
padding: 0;
text-align: center;
font-size: 40px;
fonat-weight: normal;
}
.flightInfo {
width: 100%;
border-collapse: collapse;
}
.flightInfo th {
text-align: left;
padding: 6px;
border: 1px solid #ccc;
}

.flightDetails {
float: left;
border-collapse: collapse;
width: 33.3%;
}
.flightDetails td {
padding: 6px;
border: 1px solid #ccc;
}
</style>
</head>
<style>
	
</style>
<body>
	
<div class="flightInfoWrapper">
<h1>Flights for Sale</h1>

<table class="flightInfo" cellspacing="0"	cellpadding="0" border="0">
	
<tr>
<td>

<table class="flightDetails" cellspacing="0"	cellpadding="0" border="0">
<tr class="flightDepartures">
<th>Departures</th>
</tr>	
</table>


<table class="flightDetails" cellspacing="0"	cellpadding="0" border="0">
<tr class="flightDestinations">
<th>Destinations</th>
</tr>	
</table>

<table class="flightDetails" cellspacing="0"	cellpadding="0" border="0">
<tr class="flightAirfares">
<th>Airfares</th>
</tr>	
</table>
	
<td>
</td>	
</table>

</div>
	
	
	
<script>
let departures;
let destinations;
let airfares;		
const flightDepartures = document.querySelector('.flightDepartures');
const flightDestinations = document.querySelector('.flightDestinations');
const flightAirfares = document.querySelector('.flightAirfares');


/* FOR LOOP */
for(let i=0; i < 4; i++) {
	
	
/* DEPARTURES */	
departures = prompt("Please enter the departure airport for flight x", "");
if (departures != '' && departures != null) {
flightDepartures.insertAdjacentHTML('afterend', `<tr>
<td>${departures}</td>
</tr>`)
}
else {
flightDepartures.insertAdjacentHTML('afterend', `<tr>
<td>Unsuccessful</td>
</tr>`)
}

/* DESTINATIONS */
destinations = prompt("Please enter destination", "");
if (destinations != '' && destinations != null) {
flightDestinations.insertAdjacentHTML('afterend', `<tr>
<td>${destinations}</td>
</tr>`)
}
else {
flightDestinations.insertAdjacentHTML('afterend', `<tr>
<td>Unsuccessful</td>
</tr>`)
}

/* AIRFARES */
airfares = prompt("Please enter airfare", "");
if (airfares != '' && airfares != null) {
flightAirfares.insertAdjacentHTML('afterend', `<tr>
<td>${airfares}</td>
</tr>`)
}
else {
flightAirfares.insertAdjacentHTML('afterend', `<tr>
<td>Unsuccessful</td>
</tr>`)
}

}
/* END FOR LOOP */

</script>
	
</body>
</html>

     

     

    B i r n o u
    B i r n o u
    Legend
    August 27, 2021

    While I do not recommend this approach, I do not comment on the use of a TABLE to hold the presentation, nor on the use of document.write to handle HTML and even less on the use of PROMPT to get the user interaction.

     

    I only focus on listening to PROMPT

        <script>
        let default_value = "Please enter your feedback";
        let result = prompt("Submit your feedback", default_value)
        let result_value = ''
        if (result == null) {
            result_value = "you have canceled !!"
        } else if (result == default_value) {
            result_value = "you d'ont have enter any string ?"
        } else if (result == '' || result.match(/^\s*$/) ) {
            result_value = "apparently your feedback is empty !"
        } else {
            result_value = result
        }
        document.write('<p>'+result_value+'</p>')
    </script>

     

    If you wish, we can recommend alternative solutions and how to act according to user interactions.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices