How to get append value in jquery or other method? - javascript

How to get append value in jquery or other method?
I want to show the the value Hello Append!!! append value on <div id="get_append_value"></div> tag,
My Javascript code:
$(document).ready(function() {
$("#show_append_value").append("Hello Append!!!");
});
My Html code
<body>
<div id="show_append_value"></div>
<div id="show_hello_world">Hello World!!!</div>
<br>
<br>
<div id="get_append_value"></div <!--need to use jquery to show 'Hello Append!!! on it, but result is empty'-->
<div id="get_hello_world"></div>
</body>
<script>
var $show_value = $('#show_append_value').html();
$('#get_append_value').html($show_value);
var $show_value2 = $('#show_hello_world').html();
$('#get_hello_world').html($show_value2);
</script>
This result:
Hello Append!!!
Hello World!!!
Hello World!!!
Although it can show the value on <div id="show_append_value"> and <div id="show_hello_world">, it doesn't give the appended value to show on <div id="get_append_value"></div> , it is empty
Can anyone teach me how to get the appended value in jquery or other method to show the value on other div tag?

Your code executes in the wrong order.
Any code that is put directly in a script tag, outside of any call-back, is executed before what you have inside the ready call back, so that means Hello Append!! is not yet in your document when you are fetching it.
To solve this, put all of your code in the ready event handler:
$(document).ready(function() {
$("#show_append_value").append("Hello Append!!!");
var $show_value = $('#show_append_value').html();
$('#get_append_value').html($show_value);
var $show_value2 = $('#show_hello_world').html();
$('#get_hello_world').html($show_value2);
});

Related

Call a function from an HTML page

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>

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

How can I call functions using onkeypress-events in EJS file?

I'm trying to accomplish a live character counter for a text input field, but cannot seem to make it work. The onkeypress-function either go as undefined or is just called once when loading the page
Simply assigning the function with onkeypress=" " does not seem to work.
Additionally, I want to update the text of charcountLabel; which I cannot seem to do. Simply using 'document.getElementById' for updating its innerHTML does not work.
How do I correctly assign keypress-functions to html-elements in .ejs?
How do I access and update innerHTML of other elements?
See code below:
<input type="text" id="textContent" onkeypress="charcount">
// Should be live-updated with the length of input text above.
<span id="charcountLabel"> 0 </span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").innerText.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Here you are
<input type="text" id="textContent" onkeypress="charcount()">
<!-- Should be live-updated with the length of input text above. -->
<span id="charcountLabel">0</span>
<script>
function charcount() {
var characterCount = document.getElementById("textContent").value.length;
document.getElementById("charcountLabel").innerHTML = characterCount;
}
</script>
Use parenthesis () to call the function and replace innerText with value property.
Note that // is comment in Javascript, not in html where you should use <!-- your comment --> instead.
Last, it has nothing to do with ejs.

Getting Wix HTML element into iFrame variable

I have a wix webpage with an HTML element on the page. I need to get the text of that element into my iFrame that contains javascript. I'd like to store that text of the html element as a variable in my iFrame javascript.
When I try the code below, my iFrame variable prints as 'undefined' in the web console.
<script>
var myElement = document.getElementById("#text15").text;
console.log(myElement);
</script>
The JavaScript function getElementById() receives as parameter the string of the id value it should search in the DOM. So, you are searching for this:
<div id="#text15"></div>
To find this element in the DOM:
<div id="text15"></div>
You could either do:
var myElement = document.getElementById("text15").innerText;
Or if you like using the hash symbol when referencing elements from the DOM, you can also try:
var myElement = document.querySelector("#text15").innerText;
Both work the same way. And also, use innerText which references as the content inside the tag. The text property of the DOM element returned by JavaScript does not exist.
Note: You should not reference your DOM elements right in a <script> tag. Since most likely the elements won't be ready by the time you call them.
Try:
<script>
window.onload = function() {
var myElement = document.getElementById("#text15").innerText;
console.log(myElement);
}
</script>
Look at an example of both ways:
var text1=document.querySelector("#myElement").innerText;
console.log(text1);
var text2=document.getElementById("myElement").innerText;
console.log(text2);
<div id="myElement">Hello!</div>
using jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#inPut').click(function() {
var myElement =
$('#text15').val();
console.log(myElement);
});
});
</script>
</head>
<body>
<br>
<input type='text' id='text15'>
<button id='inPut'>Write to console</button>
<br>
</div>
</body>
</html>

Calling JavaScript function into a P tag

I would like to call the following javaScript function so it gets outputted to a HTML P tag, but am not sure how to do this without explicitly calling the function in the HTML file.
I do not want to do this...
<p class="showcode">
<script type="text/javascript">
wise_words();
</script>
</p>
I would like to keep the javaScript code all in one js file.
I have tried it this way but this does not seem to work...
document.getElementById("showcode").innerHTML = wise_words();
I would really appreciate any help as to what I am doing wrong.
Here is my code... http://codepen.io/anon/pen/qfLdE I would like to have the generated text get outputted inside the grey box.
You should call the function in an onload handler, so that it is executed after the DOM has been constructed:
window.onload = function() {
document.getElementById("showcode").innerHTML = wise_words();
}
Another problem is that your wise_words() function is using document.write (please don't use document.write) instead of returning a value. You need to return a value:
var retText = wiseText[nextVal][0];
nextVal += 1;
writeCookie("wisewords", nextVal.toString(), 33);
return retText;
Try following using Jquery:
$(".showcode").html(wise_words());
NOTE: Assuming your function returns the HTML/text.
<p class="showcode">
<script type="text/javascript">
document.write(wise_words());
</script>
</p>
or:
<body onload="document.getElementById('showcode').innerHTML = wise_words()">
<p id="showcode">
</p>
</body>
(note id instead of class).

Categories

Resources