We Keep Coding

Simple conditional for handling the Tags (JQuery , javascript)

I want to write a conditional to handle tags.
$("#btn").click(function() {
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
$('#div2').html(number);
var $div3 = $("#div3");
if (number > 50) {
var span1 = $('<span />').addClass('yes').text('YES');
span1.appendTo($div3);
checkSpan(span1);
} else {
var span2 = $('<span />').addClass('no').text(' NO');
span2.appendTo($div3);
}
}, 1000);
});
function checkSpan($span) {
if ($span.prevUntil('.no', '.yes').length === 2) {
[].forEach.call(document.querySelectorAll('.yes'), function(e) {
e.parentNode.removeChild(e);
});
[].forEach.call(document.querySelectorAll('.no'), function(e) {
e.parentNode.removeChild(e);
});
var Reset = $('<span />').addClass('reset').text("RESET");
Reset.appendTo($("#div3"));
}
}
.yes,
.no,
.reset {
display: inline-block;
padding: 5px;
text-align: center;
margin: 1px;
}
.yes {
background-color: green;
color: white;
}
.no {
background-color: red;
}
.reset {
background-color: #5f79ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="background-color: #cce1ee;text-align: center;width: 500px;height: 500px;margin: 0 auto;">
<input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px" />
<div id="div2"></div>
<div id="div3"></div>
</div>
here we see after (3 <span class="yes">YES</span>) all spans tag with class .yes and .no will be remove
and the this <span class="reset">RESET</span> is created .
now i want a conditional => if after <span class="reset">RESET</span> is there <span class="yes">YES</span> ?
if yes?
so alert ("there is span tag with class yes after Reset")
else {
alert ("there is no span tag with class yes after Reset")
}
Example :
if
<span class="reset">Reset</span>
<span class="yes">YES</span>
do stuff ....

If i understand what you want:
$("#btn").click(function() {
var nbyes = 0;
setInterval(function() {
var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
$('#div2').html(number);
var $div3 = $("#div3");
if (number > 50) {
if(nbyes == 3){
nbyes = 0;
alert("there is span tag with class yes after Reset");
}
var span1 = $('<span />').addClass('yes').text('YES');
span1.appendTo($div3);
nbyes++;
if(nbyes == 3){
checkSpan();
}
} else {
if(nbyes == 3){
nbyes = 0;
alert("there is no span tag with class yes after Reset");
}
var span2 = $('<span />').addClass('no').text(' NO');
span2.appendTo($div3);
}
}, 1000);
});
function checkSpan($span) {
$(".yes, .no").remove();
var Reset = $('<span />').addClass('reset').text("RESET");
Reset.appendTo($("#div3"));
}
.yes,
.no,
.reset {
display: inline-block;
padding: 5px;
text-align: center;
margin: 1px;
}
.yes {
background-color: green;
color: white;
}
.no {
background-color: red;
}
.reset {
background-color: #5f79ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" style="background-color: #cce1ee;text-align: center;width: 500px;height: 500px;margin: 0 auto;">
<input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px" />
<div id="div2"></div>
<div id="div3"></div>
</div>

How to remove cell to left jQuery

I am trying to remove item from the array by selecting a cell to the left of the button, I have tried using .previous selector but it doesn't work.
var films = [];
function test2(e) {
$("button").one("click", function(r) {
r.preventDefault();
var movie = $(e).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
})
};
function newtest2(e) {
$(e).parents('tr').remove();
}
.cart {
float: right;
position: relative;
margin-right: 15%;
margin-top: 5%;
}
.cart2 {
background-color: white;
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
padding: 2% 3%;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart">
<div class="cart2">
<h1>Cart: </h1>
<table id="table1">
</table>
</div>
</div>
<button name="Black Mirror" id="BM" id="carttest" onclick="test2(this)" value="Black Mirror" class="button1">Book now (Black Mirror)</button>
<br>
<button name="Star Wars" id="SW" id="carttest" onclick="test2(this)" value="Star Wars" class="button1">Book now(Star Wars)</button>
I also have this bug that I have to click the button twice to fire the function.
Edit:
Whenever the user clicks Order button, it runs the loop that creates the table with a button "remove" and adds the item to 'Films[]' Array. I want the remove button to remove the selected row but I also want it to remove the item from the array.

Well it needs a lot of fixes in your code.
First. Identifiers must be unique for each element.
2nd. When you push in array, you'll have to remove it too.
Here is what was missing in your code
var films = [];
$(".button1").click(function(e){
var movie = $(this).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
})
function newtest2(e) {
$(e).parents('tr').remove();
films.splice(films.indexOf($(e).parent().prev().text()), 1)
}
.cart {
float: right;
position: relative;
margin-right: 15%;
margin-top: 5%;
}
.cart2 {
background-color: white;
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
padding: 2% 3%;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart">
<div class="cart2">
<h1>Cart: </h1>
<table id="table1">
</table>
</div>
</div>
<button name="Black Mirror" id="BM" value="Black Mirror" class="button1">Book now (Black Mirror)</button>
<br>
<button name="Star Wars" id="SW" value="Star Wars" class="button1">Book now(Star Wars)</button>

Don't need prevent preventDefault() for a click
var films = [];
function test2(e) {
//Don't need preventDefault()
var movie = $(e).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
};
function newtest2(e) {
const
//parents of the clicked button
parents = $(e).parents('tr'),
//children of the parents
children = parents.children(),
//text content from first child
text = children[0].textContent,
//position of the text in array
pos = $.inArray(text, films)
//if position is not -1 (not found)
if (pos !== -1 ) {
//use position to remove item from the array
films.splice(pos, 1)
}
console.log(`films:`,films)
//remove the tr element from the view
$(e).parents('tr').remove();
}
The muasif80's code works just fine too.

Div's not sorting according to classes

I found this article that's supposed to be related to what I was looking for, which is sorting a list by class. However, in my code, it didn't work. So I'm trying to figure out how to solve the problem. I have two classes, "offline" and "none". I want the class "offline" to come at top and the class "none" to appear at bottom under "offline" area. I have one more class in each div's which is "indbox", therefore, I tried to use "getElementsByClassName" but it's not working.
Here's my code from codepen.
$(document).ready(function() {
$(".con-button").click(function(){
var cssObj = {};
cssObj.left = $(this).position().left;
cssObj.width = $(this).outerWidth();
$(".controls .effect").css( cssObj );
if(this.id == "c-all") {
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').fadeIn("slow").show();
} else if (this.id == "c-online") {
$('.offline').hide();
$('.online').hide();
$('.online').fadeIn("slow").show();
$('.none').hide();
} else if (this.id == "c-offline") {
$('.offline').hide();
$('.offline').fadeIn("slow").show();
$('.online').hide();
$('.none').hide();
}
});
$(".con-button").eq(0).trigger("click");
getSteams();
var elem = $('#offline').find('div').sort(sortMe);
function sortMe(a, b) {
return a.getElementsByClassName("offline") < b.getElementsByClassName("none");
}
$('#offline').append(elem);
});
var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "OgamingSC2", "maatukka", "Vinesauce", "brunofin", "comster404", "esl_csgo"];
var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";
function getSteams() {
channels.forEach(function(indchannel) {
//for (var channel in channels) {
//var indchannel = channel;
var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
$.ajax({
url: streamURL,
type: 'GET',
dataType: "jsonp",
data: {
//action: 'query',
format: 'json',
},
headers: {
"Accept": "application/vnd.twitchtv.v5+json",
},
success: function(data) {
var game;
var status;
if(data.stream === null) {
$.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
} else {
game = "Offline";
status = "offline";
}
$("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
} );
} else {
game = data.stream.game;
status = "online";
$("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
};
}
});
});
}
html, body{
height:100%;
margin: 0;
background-color: #ffffff;
}
.wrapper {
text-align: center;
position: relative;
width: 100%;
height: 100%;
display:block;
}
.container {
width: 75%;
margin: 30px auto 0;
position: relative;
}
.logobox img {
width: 20%;
margin: 0 auto;
}
.controls {
position: relative;
width: 100%;
}
.con-button {
position: relative;
background-color: white;
border: none;
margin: 0.5em 0 0 0;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
color: rgb(100,65,164);
font-size: 20px;
transition: .4s;
}
.con-button:hover {
cursor: pointer;
/*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.divider hr {
border-top: 1px solid #6441A4;
}
.effect {
position: absolute;
display: block;
left: 0;
bottom: 5px;
height: 2px;
width: 60px;
transition: 0.4s ease-in-out;
/*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
background: #6441A4;
}
.indbox {
width: 100%;
display: block;
margin: 5px 0px;
padding: 8px 0px;
}
.online {
background-color: #98FB98;
}
.offline {
background-color: #ff9999;
}
.none {
background-color: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="twitchtvarea">
<div class="logobox">
<img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
</div>
<div class="twitchbox">
<div class="controls">
<button id="c-all" class="con-button active" type="button">All</button>
<button id="c-online" class="con-button" type="button">Online</button>
<button id="c-offline" class="con-button" type="button">Offline</button>
<div class="effect"></div>
</div>
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline"></div>
</div>
</div>
</div>
</div>
The code I would like for you to focus on is:
var elem = $('#offline').find('div').sort(sortMe);
function sortMe(a, b) {
return a.getElementsByClassName("offline") < b.getElementsByClassName("none");
}
$('#offline').append(elem);
Please help me fix it.

Looking through your code, I find out that you are using thisSort Function; however, your way of doing is incorrect. In the example, they have:
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
So in order to sort "offline" before "none", your function has to return 1
function sortMe(a, b){
if (a.hasClass("offline")) {
return 1; //if an element has offline, move it above.
} else {
return -1; //if an element doesn't have offline, it means it's none. Move it down.
}
}
You might want to add in the condition to check whether they both have offline class.

Your problem can be solved by using the :
appendTo();
method.
instead of the :
append();
method.
I added two additional divs in your html code and made a small change to your javascript code ant it works !!!
the html goes like this :
<div class="divider"><hr></div>
<div id="online"></div>
<div id="offline">
<div class="notconnected"></div>
<div class="nonexisting"></div>
</div>
</div>
and the javascript was changed here :
if(data2.status == 404) {
game = "The Account doesn't exist";
status = "none";
}
else {
game = "Offline";
status = "offline";
}
if(status==="none"){
$('<div class="indbox ' + status + '" id="'+status+'"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>').appendTo(".nonexisting");}
else{
$('<div class="indbox ' + status + '" id="'+status+'"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>').appendTo(".notconnected");
}
} );
The Documentation for the method is here : appendTo()

JavaScript success message after form submit/page re-load

I'm looking for a way to display a simple JS message/pop up when my form has been successfully submitted.
I tried doing this as an 'alert' but it stopped the 'action' from happening (page reloading) and just displayed the message instead.
If I could do this as a js alert after the action has happened and the page has reloaded this would be great but I'm open to suggestions...
Regards,
Marc
function validate() // Required Fields Validation
{
if (document.myForm.Name.value == "") {
alert("Please provide your name");
document.myForm.Name.focus();
return false;
}
if (document.myForm.Company.value == "") {
alert("Please provide your Company name");
document.myForm.Company.focus();
return false;
}
if (document.myForm.Email.value == "") {
alert("Please provide your Email address");
document.myForm.Email.focus();
return false;
}
if (document.myForm.Message.value == "") {
alert("Leave us a message");
document.myForm.Message.focus();
return false;
}
return (true);
}
function validateEmail() // Correct Email Format Validation
{
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2)) {
alert("Please enter a valid Email address")
document.myForm.Email.focus();
return false;
}
return (true);
}
function nameLength() { // Max Character Validation
x = document.myForm
input = x.Name.value
if (input.length > 40) {
alert("The Name field cannot contain more than 40 characters")
return false
} else {
return true
}
}
function companyLength() {
x = document.myForm
input = x.Company.value
if (input.length > 50) {
alert("The Company field cannot contain more than 50 characters")
return false
} else {
return true
}
}
function emailLength() {
x = document.myForm
input = x.Email.value
if (input.length > 50) {
alert("The Email field cannot contain more than 50 characters")
return false
} else {
return true
}
}
function messageLength() {
x = document.myForm
input = x.Message.value
if (input.length > 300) {
alert("The Message field cannot contain more than 300 characters")
return false
} else {
return true
}
}
#contact-area {
width: 500px;
max-height: 200px;
margin-top: 0px;
float: left;
}
#contact-area input,
#contact-area textarea {
padding: 3px;
width: 520px;
font-family: 'Lato', sans-serif;
font-size: 14px;
margin: 0px 0px 0px 0px;
border: 1px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus,
#contact-area input:focus {
border: 1px solid #ffc423;
}
#contact-area input.submit-button {
width: 100px;
float: left;
background-color: #ffc423;
color: black;
margin-top: 13px;
cursor: pointer;
}
#contact-area input.submit-button:hover {
background-color: #002b51;
color: white;
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 10px;
padding-bottom: 5px;
font-size: 15px;
color: #ffc423;
font-weight: 700;
}
textarea {
resize: none;
}
<div id="contact-area">
<form method="post" action="contactengine.php" name="myForm" onsubmit="return !!(validate() & validateEmail() & nameLength() & companyLength() & emailLength() & messageLength())">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name">
<label for="Company">Company:</label>
<input type="text" name="Company" id="Company">
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email">
<label for="Message">Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button">
</form>
<div style="clear: both;"></div>
</div>

you can set a value to a querystring param and check this on your page to alert success:
Redirect function update:
if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=contact.html\?success=true">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; }
Your page script:
you can have an on page load function to run the below:
var success = How can I get query string values in JavaScript? ;
if(success != ""){
alert(success); // javascript alert
}

error: Uncaught TypeError: Cannot set property 'innerHTML' of null after adding and deleting an Event

I have this unfinished tic-tac-toe game and i'm having trouble when i finish the first game, then press "iniciar" to play again. I get this innerHTML error, can't figure out why is this happening and i would really appreciate some help.
It actually works like this:
"Iniciar" to start playing
When game finishes if it's a tie
"Iniciar" again
If there is a winner the scoreboard changes.
"Iniciar" (here is when the error occurs)
"Reiniciar" resets the score and start a new game. This gives an error too.
It's weird because when it's a TIE, there's no problem with #errorenTurno
But when there's a winner and i start over, the error is there.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
</head>
<body>
<script type="text/javascript">
var turno = 1,
puntosX = 0,
puntosCero = 0; // some globals
window.addEventListener('load', start, false);
function start() {
document.getElementById('empezar').addEventListener('click', inicio, false); // yellow buttons
document.getElementById('reiniciar').addEventListener('click', reinicio, false);
}
function reinicio() { // yellow buttons
document.getElementById('ganX').innerHTML = 0;
document.getElementById('gandO').innerHTML = 0;
inicio();
}
function inicio() { // adds listener to all spans in the table
var x;
for (x = 0; x <= 8; x++) {
document.getElementById('boton' + x).innerHTML = '';
}
for (x = 0; x <= 8; x++) {
document.getElementById('boton' + x).addEventListener('click', jugada, false);
}
}
function jugada(evt) { // checks the move
document.getElementById('errorenTurno').innerHTML = '';
var bloqueJugado = evt.target;
if (turno === 1) {
if (bloqueJugado.innerHTML === 'O' || bloqueJugado.innerHTML === 'X') {
document.getElementById('errorenTurno').innerHTML = 'Ya se ha jugado aquíx'; // already marked
return;
} else {
if (bloqueJugado.innerHTML !== 'X') {
evt.target.innerHTML = 'X';
}
}
verificarGan('X', 1);
turno = 0;
return;
}
if (turno === 0) {
if (bloqueJugado.innerHTML === 'X' || bloqueJugado.innerHTML === 'O') {
document.getElementById('errorenTurno').innerHTML = 'Ya se ha jugado aquí0'; // already marked
return;
} else {
if (bloqueJugado.innerHTML !== 'O') {
evt.target.innerHTML = 'O';
}
}
verificarGan('O', 2);
turno = 1;
return;
}
}
function verificarGan(mov, jug) { // verifies if there is a winning move
var j1 = document.getElementById('boton0');
var j2 = document.getElementById('boton1');
var j3 = document.getElementById('boton2');
var j4 = document.getElementById('boton3');
var j5 = document.getElementById('boton4');
var j6 = document.getElementById('boton5');
var j7 = document.getElementById('boton6');
var j8 = document.getElementById('boton7');
var j9 = document.getElementById('boton8');
var detuvo = 0;
function detener(gano) { // deletes the event listener from spans in table
if (gano == 1) {
for (x = 0; x <= 8; x++) {
document.getElementById('boton' + x).removeEventListener('click', jugada);
}
}
}
function puntoTablero() { // adds points to scoreboard, since i added this i started having trouble
if (jug == 1) {
puntosX = puntosX + 1;
document.getElementById('ganX').innerHTML = puntosX;
}
if (jug == 2) {
puntosCero = puntosCero + 1;
document.getElementById('gandO').innerHTML = puntosCero;
}
}
// checking all winning moves one by one. Then it applies the needed functions.
if (j1.innerHTML == mov && j2.innerHTML == mov && j3.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j4.innerHTML == mov && j5.innerHTML == mov && j6.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j7.innerHTML == mov && j8.innerHTML == mov && j9.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j1.innerHTML == mov && j4.innerHTML == mov && j7.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j2.innerHTML == mov && j5.innerHTML == mov && j8.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j3.innerHTML == mov && j6.innerHTML == mov && j9.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j1.innerHTML == mov && j5.innerHTML == mov && j9.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
if (j7.innerHTML == mov && j5.innerHTML == mov && j3.innerHTML == mov) {
document.getElementById('ganador').innerHTML = 'Ha ganado el jugador ' + jug;
detener(1);
puntoTablero();
}
}
</script>
<style>
.laVieja {
font-family: Peralta;
position: fixed;
left: 0px;
top: 100px;
cursor: default;
color: black;
background-color: lightgrey;
}
.laVieja td {} .laVieja span {
font-size: 100px;
display: inline-block;
border: 1px solid white;
width: 160px;
height: 160px;
text-align: center;
line-height: 150px;
}
span {
clear: both;
}
.botonZ {
font-family: Peralta;
border: 1px solid black;
text-align: center;
padding-top: 18px;
cursor: pointer;
width: 150px;
height: 40px;
background-color: lightyellow;
display: inline-block;
position: relative;
top: 90px;
left: 10px;
}
.botonZ:hover {
background-color: yellow;
}
#reiniciar {} * {
font-family: Peralta;
}
#ganador {
font-size: 30px;
border: 1px solid white;
text-align: center;
position: relative;
width: 100%;
height: 130px;
top: 80px;
display: block;
color: green;
}
#estadisticas {
width: 350px;
height: 400px;
position: fixed;
top: 100px;
left: 530px;
border: 1px solid white;
}
#ganadasX {
font-size: 20px;
}
#ganadasO {
font-size: 20px;
}
#ganX {
font-size: 30px;
color: green;
}
#gandO {
font-size: 30px;
color: red;
}
</style>
<table border="1" class="laVieja">
<tr>
<td><span id="boton0">1</span>
</td>
<td><span id="boton1">2</span>
</td>
<td><span id="boton2">3</span>
</td>
</tr>
<tr>
<td><span id="boton3">4</span>
</td>
<td><span id="boton4">5</span>
</td>
<td><span id="boton5">6</span>
</td>
</tr>
<tr>
<td><span id="boton6">7</span>
</td>
<td><span id="boton7">8</span>
</td>
<td><span id="boton8">9</span>
</td>
</table>
<div id="estadisticas">
<p><span id="ganadasX">Ganadas X:&nbsp&nbsp </span><span id="ganX">10</span>
</p>
<p><span id="ganadasO">Ganadas O:&nbsp&nbsp </span><span id="gandO">5</span>
</p>
<p><span id="ganador"><span id="errorenTurno"></span></span>
</p>
<div id="empezar" class="botonZ">Iniciar</div>
<div id="reiniciar" class="botonZ">Reiniciar Juego</div>
</div>
</tr>
</body>
</html>

While checking your inner moves the innerHTML of the div with id ganador is replaced by Ha ganado el jugador. SO now what happens is that the span with id errorenTurno is lost.
Your errorenTurno span is inside the ganador span.
<p><span id="ganador"><span id="errorenTurno"></span></span>
So either you have to append the message to ganador or move out the errorenTurno span out side of ganador. once the message is displayed there is no longer an element named errorenTurno

Add a null check to element before using it:
function jugada(evt) { // checks the move
if(document.getElementById('errorenTurno')!== null )
document.getElementById('errorenTurno').innerHTML = '';
and initialize x variable used in loop using var keyword:
function detener(gano) { // deletes the event listener from spans in table
if (gano == 1) {
for (var x = 0; x <= 8; x++) {
document.getElementById('boton' + x).removeEventListener('click', jugada);
}
}
}
and your html contain not closed tr tag and an extra tr close tag just before html end:
<tr>
<td><span id="boton6">7</span>
</td>
<td><span id="boton7">8</span>
</td>
<td><span id="boton8">9</span>
</td>
<!-- add here closing tr tag-->
</tr>
</table>
Here is Demo JsFiddle