Why does the value property "some code" not showing up when I load this page?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/codemirror-5.47.0/lib/codemirror.css">
<script src="lib/codemirror-5.47.0/lib/codemirror.js"></script>
<script src="lib/codemirror-5.47.0/mode/javascript/javascript.js"></script>
<script src="lib/codemirror-5.47.0/mode/powershell//powershell.js"></script>
<title>Code Mirror</title>
</head>
<body>
<h1>Hello Code Mirror</h1>
Code Mirror Documenation
</br>
<textarea id='jsTxtArea'></textarea>
</body>
<script>
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('jsTxtArea'), {
value: "some code",
lineNumbers:true,
mode:"javascript"
});
</script>
</html>
You need to get the value from the textarea, like so:
var textarea = document.getElementById('jsTxtArea');
var myCodeMirror = CodeMirror.fromTextArea(textarea , {
value: textarea.innerHtml,
lineNumbers: true,
mode: 'javascript'
});
Or, if you want to set the value within the JavaScript:
var textarea = document.getElementById('jsTxtArea');
var myCodeMirror = CodeMirror.fromTextArea(textarea , {
lineNumbers: true,
mode: 'javascript'
});
// set the value
myCodeMirror.setValue('Some Code');
Related
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
I am trying to use HTML 'input' to change apiData.id value. I'm new to javascript and not sure if this is correct. Any suggestions would be greatly appreciated.
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '76',
}
const input = document.getElementById('container');
const newId = apiData.id;
function eventController(event) {
newId = event.target.value;
}
input.addEventListener('change', eventController, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<input id="input">
<input type="submit" value="Catch">
</div>
<div class="pokemon"></div>
<script src="main.js"></script>
</body>
</html>
newId is const, so you cannot assign it with a new value after it has been declared.
But even if you could (and you can, by making it a variable), that would not affect apiData.id, as newId is assigned with the value of apiData.id, but they are not bound together.
You should just assign apiData.id directly with a new value:
const apiData = {
url: 'https://pokeapi.co/api/v2/',
type: 'pokemon',
id: '76',
}
const input = document.getElementById('container');
// const newId = apiData.id;
function eventController(event) {
apiData.id = event.target.value;
}
input.addEventListener('change', eventController, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<input id="input">
<input type="submit" value="Catch">
</div>
<div class="pokemon"></div>
<script src="main.js"></script>
</body>
</html>
I am trying to make a code editor in JavaScript with Codemirror. I want the autocomplete feature, but it doesn't work. Can someone please tell me what I am doing wrong here.
Here is the code :
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true,
extraKeys: {
"Tab": "autocomplete"
},
hint: CodeMirror.hint.javascript
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<title>Code</title>
</head>
<body>
<textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
</script>
After a ton of research, like checking their site example and stuff, I finally found a working solution, here is the code:
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"},
mode: {name: "javascript", globalVars: true}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/mode/markdown/markdown.js"></script>
<title>Code</title>
</head>
<body>
<textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
</body>
</html>
I am using handsontable and getting a stream of json objects. When i parse it and load it into handontable, i only get a blank div container. How do i fix it?
For some reason that i dont understand data1 in line 33 becomes empty in line 38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
var data1 = new Array()
var url = "https://api.myjson.com/bins/6ysob";
fetch(url).then(function (response) {
response.json().then(function (parsedJson) {
data1 = parsedJson;
})
});
var container1 = document.getElementById('example1');
console.log('This is the parsed json', data1);
var hot = new Handsontable(container1, {
data: data1,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
</script>
</body>
</html>
this is not weird that data1 is empty at line 38 because this line is execute before the callback of the fetch you have to do this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
var data1 = new Array()
var url = "https://api.myjson.com/bins/6ysob";
fetch(url).then(function (response) {
response.json().then(function (parsedJson) {
data1 = parsedJson;
var container1 = document.getElementById('example1');
console.log('This is the parsed json', data1);
var hot = new Handsontable(container1, {
data: data1,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
})
});
</script>
</body>
</html>
(I recommend you to check some articles on Promise behavior in js)
I recommend you to take a look at this code (better readability) :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable#7.1.1/dist/handsontable.full.min.css" rel="stylesheet"
media="screen">
</head>
<body>
<h1> hello world</h1>
<script src="jquery-3.4.1.js"></script>
<script>
$("h1").css("color", "blue");</script>
<div id="example"></div>
<div id="example1"></div>
<script>
let url = "https://api.myjson.com/bins/6ysob";
fetch(url).then( resp => resp.json() ).then( json => {
let container1 = document.getElementById('example1');
let hot = new Handsontable(container1, {
data: json,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true
});
});
</script>
</body>
</html>
I've been using Aloha Editor to create an example of a simple editor, but I haven't succeed to getting it to work in Opera. The menu doesn't appear and the textarea is not editable.
In all other browsers seems to work fine, but sometimes Chrome needs to refresh the page to work.
This is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
And this is the javascript code (inside notes.js):
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});
I'm answering my own question after reading the comment from Inshallah.
The problem was that the JavaScript variables Aloha and Aloha.settings should be set before including Aloha.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script>
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
</script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
JavaScript code (inside notes.js)
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});