My Code:
JavaScript
x
143
143
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Real Time Texteditor</title>8
<style>9
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');10
11
body{12
background-color: white; 13
margin: 25px;14
}15
16
h1{17
margin-bottom: 0px;18
color: black; 19
align-content: center; 20
font-family: 'Roboto Mono', monospace;21
}22
23
#ErrorParag{24
margin-top: 0px;25
font-family: 'Roboto Mono', monospace;26
}27
28
#textarea{29
width: 100%; 30
height: 90vh; 31
color: black; 32
font-size:20px; 33
34
border: 5px solid;35
border-radius: 5px;36
} 37
</style>38
<script>39
const params = new Proxy(new URLSearchParams(window.location.search), {40
get: (searchParams, prop) => searchParams.get(prop),41
})42
const ID = params.id43
const NAME = params.name44
//console.log(String(ID)+" "+String(NAME))45
46
const xhr = new XMLHttpRequest();47
48
last_input = ""49
50
51
window.onload = function(){52
xhr.open('POST', '/api/retrieve', false);53
xhr.setRequestHeader("Content-Type", "application/json");54
xhr.send(JSON.stringify({"id":ID, "name":NAME}));55
response = JSON.parse(xhr.responseText);56
//console.log(response);57
if(response.status==="error"){58
document.getElementById("ErrorParag").innerHTML = response.error59
document.getElementById("ErrorParag").style.color = "#ff0000";60
} else if(response.status==="success"){61
document.getElementById("textarea").innerHTML = response.data62
}63
}64
65
function compareString(x, y){ //x = originally, y = new => 66
if(x.length>y.length){ //smaller String => char was deleted x>y67
for(let i = 0; i<x.length; i++){68
//console.log(String(x)+" "+String(y[i])+" --- "+String(x.length)+" "+String(i)) //kleiner Bug bei der Darstellung wird der gesamte Text angezeigt69
if(x[i]!==y[i]){70
return {"pos":String(i),"change":String(-1),"char":String(x[i])}71
}72
else if(i===x.length-1){73
return {"pos":String(i+1),"change":String(-1),"char":String(x[x.length])}74
}75
}76
77
}78
else if(x.length<y.length){ //bigger String => char was added x<y79
for(let i = 0; i<y.length; i++){80
//console.log(String(x[i])+" "+String(y[i])+" --- "+String(y.length)+" "+String(i))81
if(x[i]!==y[i]){82
return {"pos":String(i),"change":String(1),"char":String(y[i])}83
}84
else if(i===y.length-1){85
return {"pos":String(i+1),"change":String(1),"char":String(y[y.length])}86
}87
}88
}89
return {"Error":"Something went completely wrong"} 90
}91
92
function onTextUpdate(e){93
let results = compareString(last_input, e.value)94
//console.log(results)95
globalThis.last_input = e.value;96
97
send_data = JSON.stringify({"update":results, "id":ID, "name":NAME}) // {"update":{"pos": ..., "change": ..., "char": ...}, "id": ... , "name": ... }98
//console.log("Data which is gonna be send:")99
console.log(send_data)100
101
//post the results to back end102
xhr.open('POST', '/api/update', false);103
xhr.setRequestHeader("Content-Type", "application/json");104
xhr.send(send_data);105
response = JSON.parse(xhr.responseText);106
console.log(response);107
if(response.status==="failure"){108
document.getElementById("ErrorParag").innerHTML = response.error109
document.getElementById("ErrorParag").style.color = "#ff0000";110
} else if(response.status==="success"){111
document.getElementById("ErrorParag").innerHTML = "success"112
document.getElementById("ErrorParag").style.color = "#00ff00";113
}114
}115
116
const loadData = function(){117
console.log("get data from server")118
xhr.open('POST', '/api/retrieve', false);119
xhr.setRequestHeader("Content-Type", "application/json");120
xhr.send(JSON.stringify({"id":ID, "name":NAME}));121
response = JSON.parse(xhr.responseText);122
console.log(response.data);123
124
if(response.status==="error"){125
document.getElementById("ErrorParag").innerHTML = response.error126
document.getElementById("ErrorParag").style.color = "#ff0000";127
} else if(response.status==="success"){128
console.log("success!")129
document.getElementById("textarea").innerHTML = response.data130
}131
}132
133
const load_data = setInterval(loadData, 1000)134
135
</script>136
</head>137
<body>138
<h1>Real Time Texteditor</h1>139
<p id="ErrorParag"></p>140
<textarea id="textarea" placeholder="Just write ..." oninput="onTextUpdate(this)"></textarea>141
</body>142
</html>143
As you probably read, the code is for a Real-Time Texteditor Project I’m working on with a friend. But I don’t understand why everything works well until I click on the text field and wanna write something. The server gets everything and the other instance also. The only problem is, that the second instance doesn’t overwrite the innerHTML of the text field. If I reload the second instance everything appears in the text field. I’m confused. Does anyone know why this is happening?
Advertisement
Answer
First of all, you shouldn’t set an Interval to load data every second, as in a normal text editor, you load data every time the textarea’s value is changed. When setting an Interval to load data every second you’re essentially spamming the user and the server for no reason.
JavaScript
1
139
139
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
<title>Real Time Texteditor</title>8
<style>9
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');10
11
body{12
background-color: white; 13
margin: 25px;14
}15
16
h1{17
margin-bottom: 0px;18
color: black; 19
align-content: center; 20
font-family: 'Roboto Mono', monospace;21
}22
23
#ErrorParag{24
margin-top: 0px;25
font-family: 'Roboto Mono', monospace;26
}27
28
#textarea{29
width: 100%; 30
height: 90vh; 31
color: black; 32
font-size:20px; 33
34
border: 5px solid;35
border-radius: 5px;36
} 37
</style>38
<script>39
const params = new Proxy(new URLSearchParams(window.location.search), {40
get: (searchParams, prop) => searchParams.get(prop),41
})42
const ID = params.id43
const NAME = params.name44
//console.log(String(ID)+" "+String(NAME))45
46
const xhr = new XMLHttpRequest();47
48
last_input = ""49
50
51
window.onload = function(){52
xhr.open('POST', '/api/retrieve', false);53
xhr.setRequestHeader("Content-Type", "application/json");54
xhr.send(JSON.stringify({"id":ID, "name":NAME}));55
response = JSON.parse(xhr.responseText);56
//console.log(response);57
if(response.status==="error"){58
document.getElementById("ErrorParag").innerHTML = response.error59
document.getElementById("ErrorParag").style.color = "#ff0000";60
} else if(response.status==="success"){61
document.getElementById("textarea").innerHTML = response.data62
}63
}64
65
function compareString(x, y){ //x = originally, y = new => 66
if(x.length>y.length){ //smaller String => char was deleted x>y67
for(let i = 0; i<x.length; i++){68
//console.log(String(x)+" "+String(y[i])+" --- "+String(x.length)+" "+String(i)) //kleiner Bug bei der Darstellung wird der gesamte Text angezeigt69
if(x[i]!==y[i]){70
return {"pos":String(i),"change":String(-1),"char":String(x[i])}71
}72
else if(i===x.length-1){73
return {"pos":String(i+1),"change":String(-1),"char":String(x[x.length])}74
}75
}76
77
}78
else if(x.length<y.length){ //bigger String => char was added x<y79
for(let i = 0; i<y.length; i++){80
//console.log(String(x[i])+" "+String(y[i])+" --- "+String(y.length)+" "+String(i))81
if(x[i]!==y[i]){82
return {"pos":String(i),"change":String(1),"char":String(y[i])}83
}84
else if(i===y.length-1){85
return {"pos":String(i+1),"change":String(1),"char":String(y[y.length])}86
}87
}88
}89
return {"Error":"Something went completely wrong"} 90
}91
92
function onTextUpdate(e){93
let results = compareString(last_input, e.value)94
//console.log(results)95
globalThis.last_input = e.value;96
97
send_data = JSON.stringify({"update":results, "id":ID, "name":NAME}) // {"update":{"pos": ..., "change": ..., "char": ...}, "id": ... , "name": ... }98
//console.log("Data which is gonna be send:")99
console.log(send_data)100
101
//post the results to back end102
xhr.open('POST', '/api/update', false);103
xhr.setRequestHeader("Content-Type", "application/json");104
xhr.send(send_data);105
response = JSON.parse(xhr.responseText);106
console.log(response);107
if(response.status==="failure"){108
document.getElementById("ErrorParag").innerHTML = response.error109
document.getElementById("ErrorParag").style.color = "#ff0000";110
} else if(response.status==="success"){111
document.getElementById("ErrorParag").innerHTML = "success"112
document.getElementById("ErrorParag").style.color = "#00ff00";113
}114
console.log("get data from server")115
xhr.open('POST', '/api/retrieve', false);116
xhr.setRequestHeader("Content-Type", "application/json");117
xhr.send(JSON.stringify({"id":ID, "name":NAME}));118
response = JSON.parse(xhr.responseText);119
console.log(response.data);120
121
if(response.status==="error"){122
document.getElementById("ErrorParag").innerHTML = response.error123
document.getElementById("ErrorParag").style.color = "#ff0000";124
} else if(response.status==="success"){125
console.log("success!")126
document.getElementById("textarea").value = response.data127
}128
}129
130
131
132
</script>133
</head>134
<body>135
<h1>Real Time Texteditor</h1>136
<p id="ErrorParag"></p>137
<textarea id="textarea" placeholder="Just write ..." oninput="onTextUpdate(this)"></textarea>138
</body>139
</html>All I changed was combining the load_data function with the onTextUpdate function, and changing document.getElementById("textarea").innerHTML = response.data to
document.getElementById("textarea").value = response.data, since as Teemu explained well in the comments: textarea can’t contain HTML, it contains plain text only. Use value instead of innerHTML.