I started to mess around with JS yesterday but I'm like the biggest noob ^^,
I'm trying to make a button, that can show and hide a text input box with one click.
I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this
Thanks!
/gruffmeister # scotland
Here's a pure javascript example for you:
var elem = document.createElement("input");
var btn = document.createElement("button");
var txt = document.createTextNode("Hide Input");
elem.id = "hideme";
btn.appendChild(txt);
document.body.appendChild(elem);
document.body.appendChild(btn);
btn.addEventListener( 'click', function(){
var input = document.getElementById("hideme");
document.body.removeChild(input);
} );
Why not use a simple jQuery approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('button').click(function() {
$('p').toggle;
$("#myTextField").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<input id="myTextField" type="text" name="myTextField" value="">
</body>
</html>
Related
Hello again StackOverflow peeps! = )
Now I'm trying to get the value from two textboxes into a div\p\span
So, in the first box I write some text, and in the second a number
Now, when I click the button, its supposed to take the value from box1 and then write it in the div, as many times as the value in box2.
I've gotten it to take the value from box1 to the div, but I can't get it to duplicate it with a numbervalue from box2. I removed my faulty code and whats left is just the copy value to <p> thing
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function starfire () {
document.getElementById("tekst").innerHTML = document.getElementById("boks1").value;
return true;
}
</script>
</head>
<header>
<h1>cake</h1>
</header>
<body>
<input type="text" id="boks1">
<input type="number" id="boks2">
<br>
<button type="button" id="btn" onclick="starfire()">Trykk</button>
<p id="tekst"></p>
</body>
</html>
Appreciate any help from you awesome people <3 =)
Sincerely
Gruff
function starfire () {
var boks1=document.getElementById("boks1").value;
var boks2=parseInt(document.getElementById("boks2").value);
var html="";
for (var i=1; i<=boks2; i++) {
html+=boks1;
}
document.getElementById("tekst").innerHTML = html;
}
I cannot get value of input, why? Thanks for your answer!
This is the code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="fullname"/>
<button id="button">button</button>
</body>
<script>
var name = document.getElementById("fullname").value;
var btn = document.getElementById("button");
btn.onclick = function(){alert(name)};
</script>
</html>
Script tag need to be in the body tag
You need to get the value when you have entered it
Working plunk
<script>
var btn = document.getElementById("button");
btn.onclick = function(){
var name = document.getElementById("fullname").value;
alert(name);
};
</script>
here is my code. i have a text. and a button for editing the text.i want to click the edit button then that time display a btn as name save . for saving the change that i have. what should i do? help me friends
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../../Editable/css/minified-std-acount.css">
<title>Untitled Document</title>
<script src="../../../eanjoman/js/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
})
});
</script>
<style>
.editable{ background:#EAEAEA}
</style>
</head>
<body>
<div>Some text</div><br><br><button>Toggle editable</button>
</body>
</html>
Well you can just add one line code here:
DEMO
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
$(this).text('Save'); //Add this
})
UPDATE
UPDATED DEMO
To toggle it back just check for its text as below:
$('button').click(function(){
var $div=$('div'),
isEditable=$div.is('.editable');
$('div').prop('contenteditable',!isEditable).toggleClass('editable')
if($(this).text()!="Save") //Add this condition
$(this).text('Save');
else
$(this).text('Toggle editable');
})
I have this div:
<h1>$340</h1>
I need to detect if inside of this div there is a dollar symbol,
If so - remove it
I'll explain again:
I have got this code so far so I manage to detect if the symbol is in the div, but I can't figure how to remove it and update the DOM?
var sign = $('h1').text();
if (sign.indexOf("$") >= 0) {
//remove the sign
}
This is quite easy using a simple regex
var div = $('your selector here');
div.html(div.html().replace(/\$/g, ''));
That's what I have meant, without the If condition:
$('h1').text( $('h1').text().replace("$", ''));
Something like this should work:
$("h1").each(function() {
var $el = $(this);
var text = $el.text().replace("$", "");
$el.text(text);
});
Try like this
var price = $("h1").html().replace(/[^\d\.]/g, '');
console.log(price);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var val=$('#demo').html().replace('$','');
$( "div" ).replaceWith( val );
});
</script>
</head>
<body>
<h1 id='demo'>$540</h1>
</body>
</html>
Jquery can select based on contents. See https://api.jquery.com/contains-selector/.
What you need to do is:
$( "div:contains('$')" ).remove();
$(function() {
$("#button").click(function() {
var input = $("#input").val();
input = input.replace('$', '');
$("#input").val(input);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="input" placeholder="type here..." />
<button id="button">Remove</button>
</body>
</html>
This is the JQuery approach, I used replace on click on button to remove $ from input.
function HasDollar() {
if($("h1").html().indexOf("$") != -1)
return true;
else
return false;
}
try this.
In a htmlpage using jQuery or JavaScript how can the following be achieved?
User types in a question in a textarea and press on enter button, then the same question should be displayed dynamically in the page below the textarea and the user can enter as many questions.
And when the user is done the page is submitted through a submit button.
Can you give a small hint of how this can be done?
Try this to get started :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#textareabutton').click(function(){
var q = $('#textarea').val(),
$p = $('<p>').html( q );
$('#questions').append( $p );
});
$('#submit').click(function(){
var tab;
tab = $('#questions p').serializeArray();
// now do something with $.ajax to submit the questions
$.post("myphp.php",tab,function(resp){
// what do I do with the server's reply ???
});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id='textarea'></textarea>
<button type='button' id='textareabutton'>Add question</button>
<div id='questions'></div>
<button type='button' id='submit'>Submit questions</button>
</body>
</html>
Use the innerHTML property of a div to add the questions to.