I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.
Related
Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
my problem is quite minor.
I do not get along with the syntax of JavaScript
What I want to do is actually cause the following code to occur:
with this regex:
^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<meta charset="utf-8" />
<title></title>
<script>
$(document).ready(function () {
$("#but").click(check);
});
function check() {
var str = $("#dataCon").val();
var result = str.match(/\d/g);
alert(result);
}
</script>
</head>
<body>
<textarea id="dataCon"></textarea>
<button id="but">Click here</button>
</body>
</html>
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it