I want to put the value from the input into the div depending upon the key that is pressed.
What is wrong with the code and how to correct it.
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
$('button').click(function() {
var k = this.id.substr(this.id.length -1);
var mp = $('#mp'+k).value;
$('#out').html (mp);
});
http://jsfiddle.net/ftE36/1/
You should either use Vanilla JS:
document.getElementById('mp'+k).value;
Or jQuery:
$("#mp"+k).val();
Avoid mix-and-match ;)
As i understand, i think you want something like this:
$('button').click(function(e) {
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
http://jsfiddle.net/jogesh_pi/RM4UQ/
try something like
$(document).ready(function () {
$("#mp1").keypress(function () {
$("#out").html($(this).val());
});
});
Please try the code:
html:
<input id = "mp1" /><input id = "mp2" />
<button id="sum1">Submit1</button>
<button id ="sum2">Submit2</button>
<div id="out"></div>
js:
$('button').click(function(e) {
//var id = e.target.id;
var k = e.target.id.substr(this.id.length -1);
var mp = $('#mp'+k).val();
$('#out').html (mp);
});
Demo
Hope it should helpful for you. Please try and let me know. Thanks.
Related
I want the collection array with 'info', '321' and 'danger' in jquery/Javascript. I'm having following HTML code.
And I have to use '.etape' classname for this.
<input class="etape btn-info others">
<input class="etape btn-321 ">
<input class="etape btn-danger others1">
<input class="etape others">
My worst script:
<script>
$(document).ready(function() {
var myClass;
var classNames = $('.etape').attr('class').split(/\s+/);
$( ".cc" ).each( function(index, item) {
if(item.indexOf("btn-") == 0){
myClass[] = item;
}
});
});
</script>
Please help me.
Here's how to get ["info", "321", "danger"] from the posted markup
var classes = $('.etape').map(function() {
var m = this.className.match(/btn\-(.*?)(?:\s|$)/);
return m ? m.pop().split('-').pop() : m;
}).get().filter(Boolean);
FIDDLE
var collection = [];
var classRegex = /btn-.*\s/;
$(".etape").each(function(index,element) {
var className = $(element).attr('class').match(classRegex);
if(className != null){
var data = className[0].replace("btn-","").trim();
collection.push(data);
}
});
Use CSS attr selectors:
$('[class*="btn-"]').val('hello');
// returns: [<input class="etape btn-info others">, <input class="etape btn-321">, <input class="etape btn-danger others1">]
demo: https://jsfiddle.net/tianes/dx91guLw/
I am making a To-do list, where I want to be able to add new tasks, and delete tasks that are checked off. However, it seems my function just deletes all tasks, not just the ones that are checked off. Neither does it seem to allow new tasks to be added.
html:
<h1 id="title"> To-do list</h1>
<div id="task_area">
</div>
<input type="text" id="putin"></input>
<button id="add">add</button>
javascript:
<button id="clear">Clear completed tasks</button>
var tasks = document.getElementById("task_area")
var new_task = document.getElementById("add")
var clear = document.getElementById("clear")
new_task.addEventListener("click", function() {
var putin = document.getElementById("putin")
var input = document.createElement('input')
input.type = "checkbox"
var label = document.createElement('label')
label.appendChild(document.createTextNode(putin.value))
task_area.appendChild(input)
task_area.appendChild(label)
})
clear.addEventListener("click", function() {
for (i = 0; i < task_area.children.length; i++) {
if (task_area.children[i].checked === true) {
task_area.remove(tasks.children[i])
}
}
})
jsfiddle: https://jsfiddle.net/4coxL3um/
.remove removes the element you are calling it from, and doesn't take an argument for what to remove. The following:
task_area.remove(tasks.children[i])
should be
tasks.children[i].remove()
EDIT: As Mononess commented below, this will only remove the checkboxes and not the labels. While you could delete both using Jayesh Goyani's answer below, it's probably better that each input/label pair be wrapped in a single div or span for easier management.
You could try adding an event listener to each child of task_area that calls the below function. Haven't gotten a chance to test it out, and may not fulfill all of your requirements, but should get the job done.
function removeClicked() {
this.parentNode.removeChild(this);
}
Please try with the below code snippet. Below code will help you to remove selected checkbox with label.
<body>
<h1 id="title">To-do list</h1>
<div id="task_area">
</div>
<input type="text" id="putin" />
<button id="add">add</button>
<button id="clear">Clear completed tasks</button>
<script>
var tasks = document.getElementById("task_area")
var new_task = document.getElementById("add")
var clear = document.getElementById("clear")
new_task.addEventListener("click", function () {
var putin = document.getElementById("putin")
var input = document.createElement('input')
input.type = "checkbox"
var label = document.createElement('label')
label.appendChild(document.createTextNode(putin.value))
task_area.appendChild(input)
task_area.appendChild(label)
//document.getElementById("task_area").innerHTML = putin.value
})
clear.addEventListener("click", function () {
for (i = 0; i < task_area.children.length; i++) {
if (task_area.children[i].checked === true) {
tasks.children[i].nextSibling.remove();
tasks.children[i].remove();
}
}
})
</script>
</body>
Please let me know if any concern.
What I want to do is whenever I type a value in the text field, the value typed will be displayed right away.
How do I do it exactly? Is there anyway I could put the value in a variable and use it right away without using onClick?
Here is how I would do it:
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()">
<div id="div1"></div>
I don't think you can do it without any events.
Maybe you can do it with HTML5's <output> tag. I don't know it very well, but try some research.
W3Schools have some good examples.
Hope this can help you
Without using the change event? Why on earth would you want this? The only alternative I can think of would be polling at an interval. Something like:
var theValue = "";
var theTextBox = document.getElementById('myTextBox');
// Run 10 times per second (every 100ms)
setInterval(function() {
// Check if the value has changed
if(theTextBox.value != theValue)
{
theValue = theTextBox.value;
}
}, 100);
<script>
function change(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
function changenew(){
var el1 = document.getElementById("div1");
var el2 = document.getElementById("text");
el1.innerHTML = el2.value;
}
</script>
<input type="text" id="text" onkeypress="change()" onchange="changenew()">
is it Possible
you can check to see if your input field is in focus, then listen for any key input events and update your display field with the appropriate characters.
html:
<input type="text" id="myText"/>
<span id="output"></span>
js:
var myText = document.getElementById("myText");
myText.onkeyup = function(){
var output = document.getElementById("output");
output.innerHTML = this.value;
}
demo : http://jsfiddle.net/seUBJ/
my script is :
$('document').ready(function () {
var position = 0;
var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data[position].id).text(data[position].id);
$("#container").append(newdiv);
position++;position %= data.length;
});
});
My html is:
<html>
<body>
<button id="add">Add new div</button>
<div id="container"><div id="user3"></div></div>
</body>
</html>
when click a button i am appending new divs with some id name here before insert div i want to check all div id names if anything matches i don't want to append that div
my jsfiddle is here
$("#add").click(function() {
...
$.each(data, function(index, value) {
$("<div />").attr('id', value.id).text(value.id).appendTo("#container");
});
});
Please read the jQuery Cookbook. It'll help with the... headaches.
use array.length as the new id?
$('document').ready(function () { var data = [{'id':'user1'},{'id':'user2'},{'id':'user3'},{'id':'user4'},{'id':'user5'}];
$('#add').click(function() {
var newdiv=$('<div></div>').attr('id', data.length).text(data.length); $("#container").append(newdiv);
var newData = {};
newData.id = 'user'+data.length;
data[data.length] = newData});
});
Thanks thiefmaster ;)
How do I convert this javascript selected to jQuery? I need to select a button class rather than an ID, and I understand the easiest way to do this is jQuery.
var playButton1 = document.getElementById("playButton1");
playButton1.onclick = function() {
var ta = document.getElementById("playButton1");
document['player'].receiveText1(ta.value);
ta.value = ""
};
Try the following. You didn't specify the new class name so I assumed it was "playButton".
$(document).ready(function() {
$('.playButton').click(function() {
document['player'].receiveText1(this.value);
this.value = "";
});
});
var playButton1 = $("#playButton1");
playButton1.onclick = function() {
var ta = playButton1.val();
document['player'].receiveText1(ta);
playButton1.val('');
};
$('#playButton1').click(function(){
document['player'].receiveText1($('playerButton1').val());
$('playerButton1').val('');
});
var playButton1 = $("playButton1");
playButton1.click(function() {
var ta = $("playButton1");
document['player'].receiveText1(ta.val());
ta.val("");
});
<button class="playButton" value="1">Play 1</button>
<button class="playButton" value="2">Play 2</button>
<script type="text/javascript">
$(function(){
$(".playButton").click(function(){
document['player'].receiveText1($(this).val());
});
});
</script>
$('#Class').click(function(e){
document['player'].receiveText1(event.target.value);
event.target.value = ""
});