Creating text node results in [object HTMLSpanElement], why? - javascript

Why am I not getting time in local format inside the span with the timestamp class?
var modifiedField = document.querySelector(".modified");
var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";
modifiedField.innerHTML = modifiedFieldContent;
var updatedTime = new Date();
var timestamp = modifiedField.querySelector(".timestamp");
timestamp.appendChild(document.createTextNode(timestamp.toLocaleString()));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div class="modified"></div>
</body>
</html>

You use toLocaleString() on timestamp variable, which is an HTML element, instead of the updatedTime variable.
Try:
var modifiedField = document.querySelector(".modified");
var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";
modifiedField.innerHTML = modifiedFieldContent;
var updatedTime = new Date();
var timestamp = modifiedField.querySelector(".timestamp");
timestamp.appendChild(document.createTextNode(updatedTime.toLocaleString()));
<div class="modified"></div>

You're using the wrong variable.
You need
timestamp.appendChild(document.createTextNode(updatedTime.toLocaleString()));
How about this though:
document.querySelector(".modified").innerHTML = "Modified: " + new Date().toLocaleString();

First you forgot the span closing '>'var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";, then you have to call toLocaleString() on you updatedTime, not on your timestamp which is an Element.

Related

replace variable name with the respective variable value

I want to make a website in which variable name written in '{{' and '}}' should get the value of variable. For example
<body>
hi its is {{ a }}
<script>
var a = me;
</script>
</body>
the output should be
hi its is computer
here is my code.
<!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>Document</title>
</head>
<body>
hey it is {{ data[0] }}. how are you. I am {{ data[1] }} years old.
<script>
var data = ["computer",'2000'];
//the script
var doc = document.body.innerHTML;
let length = doc.split('{{').length-4;
for(let i=1;i<=length;i++){
let dos = doc.slice(doc.search('{{')+2,doc.search('}}'));
eval(`sp = ${dos}`);
document.body.innerHTML = doc.replace(dos,sp).replace('{{','').replace('}}','');
var sp = '';
}
//the end of script
</script>
</body>
</html>
output of the above code is:
hey it is computer. how are you. I am {{ data[1] }} years old.
once visit this jsfiddle. Here is my code. https://jsfiddle.net/3ocmkwq2/
Thanks
This line
document.body.innerHTML = doc.replace...
updates document.body.innerHTML, but does not update the doc variable, so this remains as it was before any replacements were made.
So next loop, doc is still the original, so the splice to get {{ }} re-gets the data[0].
To fix, update doc= after changing the .innerHTML
var data = ["computer", '2000'];
//the script
var doc = document.body.innerHTML;
let length = doc.split('{{').length - 4;
for (let i = 1; i <= length; i++) {
let dos = doc.slice(doc.search('{{') + 2, doc.search('}}'));
console.log(dos)
eval(`sp = ${dos}`);
document.body.innerHTML = doc.replace(dos, sp).replace('{{', '').replace('}}', '');
// update the doc variable
doc = document.body.innerHTML;
var sp = '';
}
hey it is {{ data[0] }}. how are you. I am {{ data[1] }} years old.

Javascript cloneNode for adding new elements

what I'm trying to do is. when I click
function runIt(text) {
var counter = 1;
var comment = document.getElementById("name");
comment.innerText = text;
comment.cloneNode(true);
comment.id += counter;
}
document.addEventListener("click", function(e){
runIt("test")
}, true);
I want it to ADD a new element underneath that output "test".
it's keep getting replaced. :(
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>t</title>
</head>
<body>
<p id="name" class="someclass"></p>
</body>
</html>
cloneNode returns the new code, which you can then append to the DOM. Also counter should be defined outside the function and then incremented each time.
var counter = 1;
function runIt(text) {
var comment = document.getElementById("name");
newcomment = comment.cloneNode(true);
newcomment.innerText = text;
newcomment.id += counter;
counter++;
document.querySelector('body').append(newcomment)
}
document.addEventListener("click", function(e){
runIt("test")
}, true);
<p id="name" class="someclass">-</p>

Convert from input type date to miliseconds using javascrip?

i'm trying to convert date (from a input type="date") to miliseconds but my output is "NaN, NaN" for some reason.
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stats</title>
<h1>Stats</h1>
</head>
<body>
<div class="contenedorFechas" for="fechas">
<p>Insert date to promediate temps and humidity</p>
<input type="date" id="fechaUno">
<input type="date" id="fechaDos">
<input type ="button" id="btnPetDatos" value="Solcitar">
<p id="pRespuesta">...</p>
</div>
</body>
<script src="metodosJS.js" type="text/javascript"></script>
</html>
Javascript:
document.getElementById("btnPetDatos").onclick = function (){
var auxUno = new Date(document.getElementById("fechaUno").value);
var auxDos = new Date(document.getElementById("fechaDos").value);
var fechaUno = auxUno.getMilliseconds();
var fechaDos = auxDos.getMilliseconds();
var Parametros = [fechaUno,fechaDos];
document.getElementById("pRespuesta").innerHTML = Parametros;
}
You forgot to take value of date elements
document.getElementById("btnPetDatos").onclick = function (){
var auxUno = new Date(document.getElementById("fechaUno").value);
var auxDos = new Date(document.getElementById("fechaDos").value);
var fechaUno = auxUno.getMilliseconds();
var fechaDos = auxDos.getMilliseconds();
var Parametros = [fechaUno,fechaDos];
document.getElementById("pRespuesta").innerHTML = Parametros;
}
And are u sure to use getMilliseconds() method because u choose time so there is not hour or minute so u will take 0 always.
u can use getTime() method it return an integer to you. So you can use them how you want.

wrap Intl.DateTimeFormat's format

I try to format an ISO date string with Intl.DateTimeFormat.
Since it does not accept strings, I have tried to modified the instance's format function.
It returns an error:
RangeError: Invalid time value
var str = '2018-05-30T12:20:51.526Z'
var date = new Date(str)
var dtf = new Intl.DateTimeFormat('en');
var format = dtf.format;
dtf.format = function(str) {
var date = new Date(str);
return format(date);
}
console.log(new Intl.DateTimeFormat('en').format(date)) // 5/30/2018
console.log(dtf.format(str))
Here is a JsBin with the code.
I think you could best use 'moment.js' to format it.
var str = '2018-05-30T12:20:51.526Z'
var date = new Date(str)
console.log(new Intl.DateTimeFormat('en').format(date))
console.log(moment(str).format("MM/DD/YYYY"));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<title>JS Bin</title>
</head>
<body>
</body>
</html>
Import the 'moment' script in your HTML file and you can convert your ISO date to whatever format you want.

Unable to call a Javascript class from HTML

Please have a look at the below code
TTSScript.js
function TTS()
{
var msg = new SpeechSynthesisUtterance("yohan");
var voices = window.speechSynthesis.getVoices();
this.speakText = function()
{
window.speechSynthesis.speak(msg);
}
}
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/scripts/TTSScript.js"></script>
<script>
function speak()
{
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
}
function speak2()
{
var TTS = new TTS();
TTS.speakText();
}
</script>
</head>
<body>
<div><button onclick="speak2()">Click me</button></div>
</body>
</html>
Unfortunatly when I click on the button in the html page, what I get is an error. It is below.
Uncaught TypeError: undefined is not a function (13:42:13:817 | error, javascript)
at speak2 (public_html/index.html:23:26)
at onclick (public_html/index.html:31:126)
I am not much familiar with JavaScript, can you please let me know why I am getting this error and how to fix it?
After declaring a function, its name becomes a (locally) preserved word. It means that creating a variable with the same name might cause some problems.
I took your code and changed
var TTS = new TTS();
TTS.speakText();
Into
var tts = new TTS();
tts.speakText();
And the error disappeared.
I solved your problem.. :
don't use all capital names as variables
var tts = new TTS();
tts.speakText();
correct speak call is in the fiddle
http://jsfiddle.net/bpprwfxa/4/
var msg = new SpeechSynthesisUtterance('Yohan');
window.speechSynthesis.speak(msg);

Categories