<script>
function balanceRefresher() {
<b>Balance:
document.write(playerBalance)
</b>
}
setInterval(balanceRefresher, 1000);
</script>
Obviously, this isn't actual code, but what I'm trying to do is refresh variable 'playerBalance' in text. I have no idea what other way I could do this in, as I am an almost complete beginner to javascript.
document.write, does as the name suggests writes to the document, if you want to dynamically modify and element on the display then create a placeholder and then access the element and modify, for example, in your document create a placeholder:
<div id="any_id"></div>
Then in your javascript:
let el = document.getElementByID("any_id");
if ( el ) {
if ( el.hasChildNodes() ) {
el.removeChild(el.childNodes[0]);
}
el.appendChild(document.createTextNode("your text"));
}
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
look this example enter link description here
$( document ).ready(function() {
var i=1;
setInterval(function(){
$('p').html('');
$('p').append('<span id="add_here">'+i+'</span>');
i++;
}, 1000);
});
Related
Note:
This question is marked as a duplicate but I'm not looking to get the script element but the div element as seen in my code where the script is in.
Whereas the "duplicate" is looking to get the script tag. this is not the case with my script.
I am using JavaScript for my current project and was wondering if there is a way to detect which HTML element an object was created in.
Consider the following code.
Editable.js
function Editable(elem, form1, form2) {
this._edit_form;
this._value_form;
this._current_form;
//Getters
this.getEditForm = function() { return this._form1; };
this.getValueForm = function() { return this._form2; };
this.getCurrentForm = function() { return this._current_form; };
//Setters
this.setCurrentForm = function(current_form) { this._current_form = current_form; };
this.switch = function() {
if(_current_form == _edit_form)
_current_form = _value_form;
else
_current_form = edit_form;
};
var __construct = function() {
$(this.elem).html(this._value_form);
}();
}
-
<html>
<head>
<script src='Editable.js'></script>
</head>
<body>
<div>
<script>new Editable(this, "Company Name", "<input type='text' placeholder='enter a company name' />");</script>
</div>
</body>
</html>
The point of an editable is that it has a value form and an edit form.
I want to be able to switch between those by removing the text from the element and placing an HTML Input field.
This change is supposed to happen when clicking the element.
The problem now is that "this" logs as
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
While the object would need to know what element it is in so it may edit it's contents.
So I would need the DIV HTML element for that.
Thank you very much.
I create a textarea and a button on a loop based on a certain condition:
while($row_c= mysqli_fetch_array($result_comments))
{
//some code goes here
<textarea type="text" id="pm_text" name="text"></textarea><br>
<button name="send_comment" id="post_comment" class="button" onClick="post_pm_comment()">Post</button>
}
Now in my function "post_pm_comment" I would like to access the text written in the textarea when the post button is clicked.
I tried this, but it only gives me the text of the first textarea and button created:
function post_pm_comment(thidid, pm_id, path, pm,getter)
{
var pm_text = document.getElementById("pm_text").value;
}
What should I do?
Thank you
Your code is outputting an invalid DOM structure, because id values must be unique on the page. You cannot have the same id on more than one element. Remove the id values entirely, you don't need them.
Having done that, the minimal-changes answer is to pass this into your handler:
onClick="post_pm_comment(this)"
...and then in your handler, do the navigation:
function post_pm_comment(postButton)
{
var pm_text;
var textarea = postButton.previousSibling;
while (textarea && textarea.nodeName.toUpperCase() !== "TEXTAREA") {
textarea = textarea.previousSibling;
}
if (textarea) {
pm_text = textarea.value; // Or you may want .innerHTML instead
// Do something with it
}
}
Live Example | Source
I am trying to create a preview function in a CKEditor instance.
I'm using CKEditor 4 and am replacing textareas by class name, the only issue I am facing is that I cannot get the value of the textarea using JavaScript, this is what I've tried so far:
function prev()
{
html=document.forms["1_form"]["editor1"].value;
document.getElementById("prev").innerHTML = html;
}
and the CKEditor textarea:
<textarea class="ckeditor" onkeydown="prev()"></textarea>
Why doesn't this work? If I disable CKEditor, the script functions as expected, but not with ckeditor enabled. What am I supposed to do?
Thanks!
Edit:
I am now trying to do it with replace and this is the code I'm using:
CKEDITOR.replace('editor1'); //new ckeditor instance
var editor = CKEDITOR.instances.editor1; //reference to instance
//on `key` event
editor.on('key', function(){
var data = editor.getData(); //reference to ckeditor data
$('#prev').html(data); //update `div` html
});
it works but the only this is, it updates only after the next key is pressed so say the value of the editor is hello world it will show the preview as hello worl what can I do to this code to fix it, please ignore the first set of code.
This is because CKEDITOR replace your <textarea> into <div> with contenteditable="true" attribute and there is no value property in DOM for <div> element.
You need to add event listener to CKEDITOR instance, not to DOM element, for example:
// check if editor is ready
CKEDITOR.on( 'instanceCreated', function( e ) {
// check if DOM is ready
e.editor.on( 'contentDom', function() {
// bind "keydown" event to CKEDITOR
e.editor.document.on('keydown', function( event ) {
// write editor content into "prev" element
document.getElementById( "prev" ).innerHTML = e.editor.getData();
}
);
});
});
For anyone who needs it, here's one way to get the TEXT value of an HTML field (used in this case for a dynamic character counter):
JS ...
CKEDITOR.replace( 'myDoc', {
width: 605,
height: 500
});
setInterval("updateCount()", 500);
function updateCount() {
var str = CKEDITOR.instances.myDoc.getData();
if (str) {
var element = CKEDITOR.dom.element.createFromHtml( str );
var no_html = element.getText();
$('#myDoc_length').html( no_html.length );
}
}
... with HTML ...
<textarea id="myDoc"></textarea>
<span id="myDoc_length">0</span> characters
I have two URL's
url 1 = www.xyz.co.uk/asd.qmd
url 2 = www.xyz.co.uk/asd.qmd?getstep=4#
I want to show a div(left) when PAGE URL is www.xyz.co.uk/asd.qmd?getstep=4#
In the page form.php I wrote the following code:
<script>
$(function(){
var locate = window.location;
if (locate=="http://localhost/school/form.php") {
$('#left').hide();
} else {
$('#left').show();
}
});
</script>
<body onload="function()">
<div id="left">
aasdsasdfdsgfg
</div>
</body>
Why is this not working?
Just make php condition
<?php
if($_GET['getstep']){
}
?>
$('#left').toggle(window.location.href !== "http://localhost/school/form.php");
You need to make a show/hide function the proper javascript way. What you are doing at first with the (I assume) jQuery is beyond me - just declare a simple function containing the code you already have to show/hide and attach it to the onload-event.
If you just want to hide the div when the query string is empty, you could use the search property of the window.location object:
$(function(){
if (window.location.search === "") {
$('#left').hide();
} else {
$('#left').show();
}
});
Anything more complicated (i.e. a different div for each page value) and I recommend you look at regex
You need to use the href property of the window.location object.
var locate = window.location.href,
myElement = $('#left');
locate == "http://localhost/school/form.php"
? myElement.show()
: myElement.hide();
I've got a list of links, all in the same class, each with a custom argument ("switch-text"). My script should copy the text of the custom argument to the text of each link and replace it ("Pick A" should become "Pick A Please").
It works fine with only 1 link, but when I add several, they all get switched to the first argument. ("Pick B" should be replaced by "Pick B Please", but it doesn't).
I could probably solve this using each(), but I'm preferably looking for a simple, single jQuery line that does it, and I'm baffled I haven't yet found out how to achieve this.
Can somebody help? Thanks!
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(".switcher").text( $(".switcher").attr("switch-text") );
});
</script>
Pick A<br>
Pick B<br>
You should use each to go through all the elements, and use this to always act on the current one.
$(document).ready(function() {
$(".switcher").each(function(){
$(this).text( $(this).attr("switch-text") );
});
});
Demo
Without jQuery
you need:
Dean Edwards document ready
getElementsByClassName
Code:
readyList.push(function() {
var els = getElementsByClassName("switcher");
for ( var i = els.length; i--; ) {
els[i].innerHTML = els[i].getAttribute("switch-text");
}
});
And change Dean's script to execute functions on document.ready:
function init() {
// ...
// do stuff
for ( var i = 0; i < readyList.length; i++ ) {
if ( typeof readyList[i] === "function" ) {
readyList[i]();
}
}
//..
}
That's it. You've saved a lot of bandwidth. :)
Demo without jQuery