Call a function from an HTML page - javascript

I'm a beginner with JavaScript and I have a problem with one task:
An HTML page contains an element who's id attribute is "number". The page calls the function countNelio(), which should retrieve the contents of the element, calculate its square (second power), and print this to the console in the form "The square of X is Y". Create this function. That HTML page loads your code, so you can refer to the HTML page in your code with the word document.
<body>
<p id="number">0</p>
<button id="button" onclick="countNelio()">Click here!</button>
</body>
In sample:
The square of chapter 12 is 144
Could someone help me? What kind of javascript code?

You need to define the function in a script tag in the html, like so:
<script>
function countNelio {
const value = document.getElementById("number").textContent
console.log(Math.pow(value, 2))
}
</script>

Related

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

store the 'this' object in an onclick attribute

What I ultimately want is to retrieve the innerHTML of the example script below (the html is to be put in a database). It must include the onclick events also. However in the generated HTML there is no onclick event available.
<html>
</head>
<script>
function test() {
this.goodbye="goodbye!";
this.elem=document.createElement('div');
this.elem.style.border='1px solid #888888';
this.elem.textContent="hello";
this.elem.style.cursor='pointer';
var that=this;
this.elem.onclick=function(){that.say_goodbye();}
document.getElementsByTagName('body')[0].appendChild(this.elem);
}
test.prototype.say_goodbye=function(blockid) {
this.elem.textContent=this.goodbye;
}
</script>
</head>
<body>
<script>var obj = new test();</script>
get html
</body>
</html>
the line of importance is thus:
this.elem.onclick=function(){that.say_goodbye();}
I tried to add it as attribute like:
this.elem.setAttribute('onclick',that.say_goodbye.bind(that));
But is doesn't work. When I click the link in the given code the browser alerts:
<div> onclick="function(){[native code]}" ..... </div>
In this case the HTML now has an 'onclick' event but contains '[native code]' as action.
Anyone an idea on how to make the code work?
The reason you get this is that attribute value is text always and you are trying to put object into it (functions are objects). This case you should rather use this.elem = that.say_goodbye.bind(that).

Take a string and use it as pure HTML?

Lets say I have a string called Test, and its value is:
<img src=test.gif></img>
<p> Testing 123 </p>
Is it somehow possible to use it as code since the HTML isn't compiled?
Edit: I tried this and it didn't work.
<body>
<p id="myText" onload="HTMLThing()"> Soon. </p>
</body>
<script>
var testString = "<img src=test.gif></img><p> Testing 123 </p>"
function HTMLThing(){
document.getElementById("myText").innerHTML=testString;
}
</script>
I don't know which language you are using, but certainly you can open a file(with .html extension) and dump the string to that file. Later, when you open the HTML file, you will get the rendered web page.
But be sure about the directory in which you create that file, should also contain the image, or you can change the image's location in the string.
On your page you can create HTML element and give it some ID, e.g. "myText". E.g.:
<div id="myText">This is what's shown before Javascript runs.</div>
Then in your Javascript code you can do:
document.getElementById("myText").innerHTML='<img src=test.gif></img><p> Testing 123 </p>';
That will fill your element with the above code with the obvious consequences (adding image and text) if that's what you want.
Update: If you're calling your Javascript function with the onload event, be sure to put onload="myFunction()" assignment into the body tag, since it doesn't work in div, p and so on. Alternatively, you can use onClick instead of onload which will work with div, p and other elements.
The code below should work. The problem was that the <p> element does not fire the onload event, but the body does.
<body onload="HTMLThing()">
<p id="myText">Soon.</p>
<script type="text/javascript">
var testString = "<img src=test.gif></img><p> Testing 123 </p>";
function HTMLThing(){
document.getElementById("myText").innerHTML = testString;
}
</script>
</body>
There are several ways to do the onload event, another method:
<body>
<p id="myText">Soon.</p>
<script type="text/javascript">
var testString = "<img src=test.gif></img><p> Testing 123 </p>";
function HTMLThing(){
document.getElementById("myText").innerHTML = testString;
}
window.onload = function(){
HTMLThing();
}
</script>
</body>

Javascript's equivalent to "goto" [duplicate]

This question already has answers here:
How can I use goto in Javascript?
(16 answers)
Closed 8 years ago.
I'm programming a basic click counter for my site on a hidden Easter egg page when I encountered a problem I never had when programming web before: Does Javascript have an equivalent to other programming languages goto. The code is below, if anyone can make adjustments to it so that the displayed "clicks" are altered and do not remain at 0 while the variable itself if changed later in the code.
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<script>
document.write(clicks)
</script>
<br>
<button onclick ="clicks = clicks + 1">Click me</button>
</body>
</html>
What you want is to write and then repeatedly call a function. And you don't want that function to call document.write; you probably want it to append text to an existing DOM node.
I suggest picking up an introductory book on JavaScript.
Create the following html content:
<div id="myDiv"></div>
Also, after updating the clicks variable value, update the div content like this:
document.getElementById("myDiv").innerHTML = clicks;
Although I'm a novice at Javascript, I have experience with Python, Java and C++ and the only real GOTO alternative is a user defined function. In javascript, I believe it is just function functionname { code here }
No. Generally using goto statement is bad idea.
What you need to do is to write clciks to specific element each time when user clicks. Like this:
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<div id="myinfo"></div>
<br>
<button onclick="clicks = clicks + 1; document.getElementById('myinfo').innerHTML=clicks">Click me</button>
</body>
</html>
Also, you could use shorter command:
<button onclick="clicks = clicks + 1; myinfo.innerHTML=clicks">Click me</button>

How to refer html element id specified in visualforce and pass onto javascript function?

I have apex tag that generate input text field.
<apex:page id="my_page">
<apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>
When someone clicks this field, I want to execute javascript.
But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.
<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010"
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">
As you can see id has junk part :(
id="j_id0:j_id3:j_id4:c_txt"
In my Javascript I'm trying to getElementById('c_txt') but this does not work of course. How to deal with this???
UPDATE
Seems like I can do this but not working...
<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>
<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />
datepickerjs
var elem = getElementById('c_txt');
alert(elem);
The alert shows 'null' so something must be wrong.
Even this alert returns null...
var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);
You can use the $Component notation in javascript, you use it like so:
var e = document.getElementById("{!$Component.ComponentId}");
One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="theBlockSection">
<apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>
// snip
// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");
I got solution to my problem.
$Compoent global visualforce expression can only be used in visualforce code not inside of
Javascript as far as my search.
Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.
Created Date: <apex:inputText id="dah" value="{!created}" size="50"
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>
<script>
function go(field) {
var huh = document.getElementById(field).value;
alert(huh); //returns the string u put inside of input text field
}
</script>

Categories

Resources