Implementation of TogetherJS is not working - javascript

I am trying to make a simple shareable text editor with Mozilla's TogetherJS, but it does not seem to work. Based on their instructions, I added the library/script in the head and calling the JS from the button.
https://togetherjs.com/
In the Head tag:
<script src="https://togetherjs.com/togetherjs-min.js"></script>
In the body:
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<div>
<textarea style="border:1px solid red; height:300px; width: 500px; font-size: 16px;">
</textarea>
</div>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
It seems to super-simple, yet for some reason, it does not seem to work!

Could you please check now wrap your script in the body i.e.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>

Related

how to access parent document from html object in javascript?

this is about HTML <object> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
and child.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
but I got this error :
TypeError: document.parentNode is null
so how to access to #square element from child.html in JS ?
Try this -
parent.document.getElementById('square').style.background = e.target.textContent

Is there a way to hint the passed argument type to IDE (in my case Webstorm) in Javascript?

I have the following HTML file with some JavaScript in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<div id="root"></div>
<div>
<label for="new-content">
<textarea id="new-content" style="width: 400px; height: 100px"></textarea>
</label>
<br/>
<button onclick="addContent(document.getElementById('new-content'))">Submit</button>
</div>
<script>
function addContent(/*HTMLTextAreaElement*/content) {
alert(content.value);
}
</script>
</body>
</html>
I like how I can hint Webstorm (or IntelliJ or Eclipse) what is the type of content is in function addContent, but I do not like how I can not tell what it is in onclick, which leads to following warning:
Here is my first world problem: Can I hint the type of document.getElementById('new-content') in the argument?
I figured out a way by trial and error, the following seems to work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<div id="root"></div>
<div>
<label for="new-content">
<textarea id="new-content" style="width: 400px; height: 100px"></textarea>
</label>
<br/>
<button onclick="addContent(getNewContent())">Submit</button>
</div>
<div id="content"></div>
<script>
function getNewContent() {
return document.getElementById('new-content');/*HTMLTextAreaElement*/
}
function addContent(/*HTMLTextAreaElement*/content) {
document.getElementById('content').innerHTML =
document.getElementById('content').innerHTML +
'<p>'.concat(content.value).concat('</p>');
}
</script>
</body>
</html>

vim, right way to indent css and js inside html

Couldn't find proper solution in old questions, so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
everything except code inside <style> and <script> tags indented ok, how can I fix it?
As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.
That is however configurable via vimrc with:
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"
...and -shame on us- is also mentioned in :help html-indent
I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.
Your code is indented like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>

Set background color

I'm trying to set background color to blue using javascript ran with Sublime Text 3. What command should I be using. Thank you
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<backgroundColor="blue>;
</backgroundColor="blue">
</body>
</html>
<style> tag is used to declare CSS properties in the same HTML document.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blueDiv
{
background-color: blue;
}
</style>
</head>
<body>
<div class="blueDiv">
Background color of this div is blue.
</div>
</body>
</html>
You can use inline style with div to set background color:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.bg-blue{background-color:blue;}
</style>
</head>
<body>
<div class="bg-blue">
</div>
</body>
</html>
Thank you guys, until now I tried this - in vain:
<!DOCTYPE>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>DropDown</title>
<script language="javascript">
fuction()
$("select").change(function() {
$(this).css("background-color", ($(this).attr("data-correctVal") ==
$(this).val()) ? "green" : "red");
});
</script>
</head>
<body>
<select name="Armaturen">
<option value="1">Ölvorwärmung</option>
<option value="2">Kesselthermostat</option>
<option value="3">Ölpumpe</option>
<option></option>
</select>
</body>
</html>
Now I will try yours - patience please ... and thanks a lot!!!

Javascript generated HTML not working

The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>

Categories