I am creating a basic calculator using css, html and js. I have a function as follows:
document.getElementById('user_radius').onkeyup = function ()
{
document.getElementById('live_update').innerHTML = this.value;
}
Basically, whatever is typed into the user text box is supposed to live update the text that lies within the span tag with the id of "live_update". I have a text box with an id of user_radius. I save changes and can't get the text to live update. Am I missing a basic principle here?
there are multiple ways to do it
1.mix javascript and DOM. This makes it a little difficult to debug your stuff in the future.
<input id='user_radius' onkeypress='doSomething()' />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
2.standard jquery method:
<script type="text/javascript">
$(document).ready(function(){
$('#live_update').on('keyup', function(){
$('#user_radius').val($('#live_update').val());
});
});
</script>
3.find a front-end framework that does 2-way data binding for you such as Angular
demo: http://www.angularjshub.com/examples/basics/twowaydatabinding/
this should do the job:
<input id="user_radius" onkeypress="doSomething()" />
function doSomething() {
document.getElementById('live_update').innerHTML = this.value;
}
Related
I have a web page which consist of a <span> element and <input> element.
My requirement is to dynamically enabling/disabling the <input> element based on <span> innerHTML.
I have written following javascript:
var vale=document.getElementById("SPAN_ID").innerHTML;
But value is coming as undefined,since I guess at page loading span element is yet to be constructed.I have to perform this operation on page loading time only.Can anyone provide any suitable javascript code for this??
You can use the DOMContentLoaded event to wait for the HTML to be fully loaded and parsed before running your code:
<script>
document.addEventListener('DOMContentLoaded', function () {
var value = document.getElementById("the-span").innerHTML;
if (value) {
document.getElementById('the-input').disabled = false;
}
}, false);
</script>
<span id="the-span">Hi, I'm the span</span>
<input id="the-input" value="I'm the input" disabled>
If you delete the text inside of the span element, and re-run the snippet, you'll see that the input box remains disabled.
If page load is indeed your problem
If you are using jquery, paste the code inside
$(document).ready(function() {
});
If you are using plain js then
window.onload = yourfunctioncomeshere
Try this if your are using jquery:
$(document).ready(function() {
var spanText = $('#SPAN_ID').text();
//based on var spanText value you can disable/enable input
//To disable input
$('#INPUT_ID').attr({
'disabled': 'disabled'
});
// To enable input
if ($('#INPUT_ID').attr('disabled')) {
$('#INPUT_ID').removeAttr('disabled');
}
});
When I have a page with button that modifies the layout (let's say checkbox that shows/hides a box) I end up writing following blocks of code:
$(function(){
var advancedOptionsToggle = function() {
var isChecked = $('#advanced-options-checkbox').checked;
$('#advanced-options').toggle(isChecked);
};
advancedOptionsToggle();
$('#advanced-options-checkbox').change(advancedOptionsToggle);
});
The reason is that my page content is dynamically generated on the server side, instead of rendered by JS on the client side, so the checkbox might already come checked.
It looks to like a common problem, so I believe there must be a pattern that solves it cleaner. Is there a jQuery function that can encapsulate it?
Your solution is certainly serviceable, however your question suggests that you may have several of these. May I suggest creating a common pattern for this kind of usage, rather than resort to IDs?
$(function(){
var toggleOptionCheck = function(el){
var isChecked = $(el).is(':checked');
$($(el).data('related')).toggle(isChecked);
}
$('.options-toggle').each(function(idx, el){
toggleOptionCheck(el);
});
// Separate call for illustration/simplicity.
$('.options-toggle').on('change', function(){toggleOptionCheck(this)});
});
<input type="checkbox" checked name="show_advanced"
class="options-toggle" data-related="#advanced-options" />
<div id="advanced-options" class="hidden-at-start"></div>
You can create a simple jQuery plugin like this to clean up the code a bit:
$.fn.advancedOptionsToggle = function(selector) {
return this.each(function() {
var isChecked = $(this).checked;
$(this).unbind('change').change(function(){
$(selector).toggle(isChecked));
});
});
};
$(function(){
$('#advanced-options-checkbox').advancedOptionsToggle('#advanced-options');
});
We all know StackOverFlow's system, which basically enables you to see what your written text look like while sending a question.
I'm looking to create this as well on my website, and I would like something to start with.
I obviously don't expect you to write that code for me, but to explain a bit what do I need for that and how would that work.
Edit: Using vanilla js instead of jquery
http://jsfiddle.net/wmjnaj6n/4/
HTML
<input type='text' id='input'>
<div id='update'></div>
Javascript
var element = document.getElementById('input');
var target = document.getElementById('update');
element.addEventListener('keyup', function() {
target.innerHTML = this.value;
});
For completeness, the jquery way would be:
$('#input').keyup(function() {
//do stuff here
$('#update').text( $(this).val() );
});
I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API
I looked at item 4197593 How to check uncheck a checkbox based on another checkbox and copied the code from the demo to my webpage. When I open the page I get a java error - the yellow triangle bottom left hand corner.
The error only occurs when I add in this javascript:
<script type="text/javascript">
$(document).ready(function(){ //bind event to checkbox
$("input[type='checkbox']").bind('click', function(){
var $t = $(this),
val = $t.val(),
key = val.charAt(val.length-1);
// check if element is checked
if($t.val() == 'la'+key && $t.is(':checked')) {
$("#lists_"+key).attr('checked', true);
}
else if($t.val() == 'la'+key){
$("#lists_"+key).attr('checked', false);
}
});
});
</script>
I am adding this to a php page:
<?php
include('header3.html');
$Fullname = $_SESSION['membername'];
include('connectdb.php');
?>
*the above javascript is added in here*
<style type="text/css">
Hope someone can help me here as I am not too bright on java.
Huh? I do not see any java in your code, only a mix of HTML and javascript.
Moreover, you should learn the basics of javascript rather than copy + paste scripts.
For instance, the code you have looks like it needs the jQuery javascript library...
Doing what you are asking in plain javascript is as trivial as:
<input type="checkbox" id="original" onchange="update()"/>
<input type="checkbox" id="other"/>
<script type="text/javascript">
function update(){
var original = document.getElementById('original');
var other = document.getElementById('other');
original.checked = other.checked;
}
</script>
Caution
You should rename function update better or even better, make use of anonymous function bound to the checkbox's change event.
You are using jQuery, so you need to include the jQuery .js too