message inside html page without alert

Question

Hi everybody i have a page that contain two div each one has a table with 3 th and 7 lines. what i want is to show a value from table just some not all of them inside a text box that i create . this is my code

//<style>
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}

.callout-header {
padding: 15px 15px;
background: #275;
font-size: 30px;
color: white;
}

.callout-container {
padding: 20px;
background-color: #ccc;
color: black
}

.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}

.closebtn:hover {
color: lightgrey;
}
div.absolute {
position: absolute;
top: 96px;
right: 0;
width: 200px;
height: 100px;
}

</style>

<div id="aob">
<div id="mydiv1" style=" width: 80%; height:50%; float:left; padding:30px;display: none" onclick="rca();"
ondblclick="abo();">
<table id="table1">
<tr>
<th align="center">NOM CLIENT</th>
<th align="center">NUM</th>
<th align="center">STATUS</th>
</tr>
</table>
</div>
<script>
var table=[["xxx",8,"NOK"],["xxxx",5,"NOK"],["xxx",8,"Ok"],["xxx",9,"OK"],["xxxx",8,"NOK"],["xxx",8,"OK"],["xxx",8,"OK"]];
for (var i=0;i<table.length;i++){
document.getElementById("table1").innerHTML+="<tr><td>"+table[i][0]+"</td><td>"+table[i][1]+"</td><td>"+table[i][2]+"</td></tr>";
}
var i;
for (var i=0;i<table.length;i++){
if(table[i][2]=="NOK") console.log("Les cases suivantes sont nok name:"+table[i][0]);
}
</script>

<div id="mem" class="callout">
<div class="callout-header">CalloutHeader</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">X</span>
<div class="callout-container">

Answer 1

I checked your code
You need to rename the tables
1. Do not use same name as DOM!
You already have a DOM named table1, so your variables should be named table2 and so on instead.
2. Do not have two variable named table. Name them table2 and table3
3. Group all your codes together into one <script> tag
4. Move all the data to the top.
5. After that, suppose you have two tables, one is table2, one is table3, add this line:
var table4 = table2.concat(table3);
This will combine the two tables to a new one table4
Run for loop over new table table4

Answer 2

If you mean not displaying the report in console log
You can change console.log to document.getElementById("....the id of the text box....").innerHTML =... The message...

Like this :
https://code.sololearn.com/W1jG7sDx95T6/?ref=app

Answer 3

Your code is not fully shown due to word limit

Your first function works for table1

If you want to screen out the Not OK entries in table2
Put your innerHTML += line in a if statement checking table[i][2]!= "NOK"

Answer 4

What does shown in same time mean?

Can you put in code playground and show me the final current code by posting link to your code here? So I can further look into your updated problem

Answer 5

And what do you want to achieve?

Answer 6

Set a global variable called animateInterval ;

In play button function:
animateInterval = setInterval( your Function, time) ;

In pause button function:
clearInterval( animate Interval) ;

I emphasize, the key of success is the variable storing the variable must be in a higher scope so the clearInterval can find it. Higher scope means declare before and outside the function where it is assigned as setInterval.

Answer 7

I coded a tutorial for you and anybody else who has this problem.

https://code.sololearn.com/WgW0wqXU1LXl/?ref=app

Look into the difference between example 1.5 and example 1.4 in details, and then read the remarks please.

Answer 8

@gordon yes i did it and it worked but they are showen in the same time

Answer 9

@gordon what i want is the message box in the right bottom must show the name that status is nok for the other table.
my code give me just the name in just one table not both

Answer 10

@gordon this is my code

https://code.sololearn.com/Wm53vDCQ49UR/#html

Answer 11

@gordon yes it worked thanks a lot bro.By the way how can i stop the excution of the program and run it after like pause and play with ondblclick and onclick.

Answer 12

@gordon i didn't understand how can i set a globale variable in html and animate?