getElementById Javascript not working? - javascript

I'm just kind of learning Javascript was following this exercise but it's not working and I don't understand. The page should read Some more text when loaded. But it's only show Some text from the paragraph. It not changing over with the getElementById like it should. Any tips?
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<p id="text">Some text</p>
<script type="text/javascript">
// This is a comment
/* Multi line comment
*/
document.getElementById{"text"}.innerHTML="Some more text";
</script>
</body>
</html>

document.getElementById("text").innerHTML="Some more text";
You have the wrong type of brackets. Use ()

You're using curly braces where you should be using parentheses.
Try this:
document.getElementById("text").innerHTML="Some more text";

Related

How to treat text with special characters as raw/literal text in textContent or createTextNode? [duplicate]

This question already has answers here:
avoid to escape a special characters in javascript
(5 answers)
Closed 1 year ago.
I want my text to be treated literally. When I write for example "\nraw\t" I want it to be displayed exactly like this - "\nraw\t", not "raw" when I use textContent or createTextNode.
Here is an exemplary HTML:
<!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>Raw, ok</title>
</head>
<body>
<div id="first"></div>
<div id="second">\nRaw\t</div>
<script>
document.querySelector("#first").textContent = "\nRaw\t";
</script>
</body>
</html>
In div with id "first" I get "Raw" without "\n" and "\t". (This is the unwanted result.)
I'm satisfied with what String.raw`\nRaw\t` returns, but unfortunately, this method is not supported by a few browsers including Opera, so I cannot use it. Any suggestions would be great.
EDIT:
Okay, maybe I should have given more details about it and not try to simplify my actual problem. The thing is - it will not always be "\nRaw\t". It can be anything my user provides in a form - so text with no special characters, text with only special characters, anything they want, so I need this solution to be flexible.
If you don't want the string to have the two quotes at the beginning and end like the answer here: Javascript - How to show escape characters in a string?, just use the splice method to cut them away.
const str = JSON.stringify("\nRaw\t")
const cutStr = str.slice(1,str.length-1)
document.querySelector("#p").innerText = cutStr;
<div id="p"><div>
You can use JSON.stringify and then remove the first and last characters (the quotes) using String#slice.
<!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>Raw, ok</title>
</head>
<body>
<div id="first"></div>
<div id="second">\nRaw\t</div>
<script>
document.querySelector("#first").textContent = JSON.stringify("\nRaw\t").slice(1, -1);
</script>
</body>
</html>
You can escape with a backslash \
Or use JSON.stringify with slice to remove quotes as suggested by others.
<!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>Raw, ok</title>
</head>
<body>
<div id="first"></div>
<div id="second">\nRaw\t</div>
<script>
document.querySelector("#first").textContent = JSON.stringify("\nRaw\t").slice(1, -1);
</script>
</body>
</html>

Uncaught ReferenceError: watermark is not defined

Hi am new in javascript , when am trying to add watermark in our page then getting an error like watermark is not defined please tell me where am wrong , what should i do to solve this error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaterMArk</title>
</head>
<body>
<h1 style="text-align: center;">Watermark</h1>
<hr />
<script>
watermark(['img/f.jpg', 'img/grator1.png'])
.image(watermark.image.center(0.5))
.then(function (img) {
document.getElementById('center').appendChild(img);
});
</script>
</body>
</html>
Well it's very clear browser doesn't recognize the keyword watermark
you may need to include watermark js to your head tag
you can find the same here
https://github.com/brianium/watermarkjs/blob/master/dist/watermark.js

${} template literal (ES2015) is work under jsp pages

<!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>
</head>
<body>
<h2> why ${variableName} is in consider as undefined in jsp page
<script>
let x="x";
console.log(`${x} is the variable`)
</script>
</body>
</html>
${} is consider as undefined in jsp pages.
Please tell me how it is coming as not expexted.
Thank You!
The fix is to escape the ${myVar} with a backslash so that JSP ignores it:
//my.jsp
<script>
var n = "Dave";
var s = `Hello \${n}`; //note the backslash
</script>

simple mailto function that composing an email from html file

I need to create a simple mailto function so when I click on the html file it brings up my default email application with the composed mail "ready-to-go." I figured a click event on the mailto ID would be sufficient, but it is not firing. What should I do? FYI, I do not want the user to click on the hyperlink. I plan on removing it.
<script type="text/javascript">
$(document).ready(function(){
$("#mymailto").click();
}); // document.ready
</script>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
<META http-equiv="X-UA-Compatible" content="IE=edge">
<META http-equiv='cache-control' content='no-cache'>
<META http-equiv='expires' content='0'>
<META http-equiv='pragma' content='no-cache'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</HEAD>
<BODY>
<a href="mailto:testEmail#gmail.com" id="mymailto" >email</a>
</BODY>
</HTML>
Just use document.location.href="mailto:testEmail#gmail.com";.

Javascript won't work: Encoding error in Firefox

Whenever I try this, I get the following error in the Firefox console:
[09:20:30.028] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>this is a title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function showAnswer(){
document.getElementById("ans").innerHTML="This is the answer";
}
</script>
</head>
<body>
<div id="q">
This is a question?
<button action="showAnswer()">Show Answer</button>
</div>
<div id="ans">
</div>
</body>
</html>
Sorry if this is a stupid question, I'm kinda new to this.
You only need;
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
should fix your problem.
Get rid of
<meta content="utf-8" http-equiv="encoding">
You just want...
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
This is also wrong...
<button action="showAnswer()">Show Answer</button>
Probably want...
<button type="button" onclick="showAnswer()">Show Answer</button>
See http://jsfiddle.net/5Qtq2/

Categories

Resources