Selecting dynamically Element id in javascript - javascript

The code given below does not work.
<html>
<head>
<script type="text/javascript">
function dosomething(ID){
var name = document.getElementById(ID).value;
alert(name);
}
</script>
</head>
<body>
<input type="text" id="name1" /><input type="button" value="click" onclick="dosomething("name1")" />
<br /><br />
<input type="text" id="name2" /><input type="button" value="click" onclick="dosomething("name2")" />
</body>
</html>


Your issue is with the quotes not used properly, console should show you the syntax error.
<input type="button" value="click" onclick="dosomething("name1")" />
to
<input type="button" value="click" onclick="dosomething('name1')" />
Fiddle

Related

Coding Virtual Numerical Keyboard [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 1 year ago.
Improve this question
I am coding virtual numerical keyboard. Can I please have an advice why my code doesn't work?
<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<input id="myInput" type="text" />
<br /><br />
<input type="button" value=1 onclick="input(1);" />
<input type="button" value=2 onclick="input(2);" />
<input type="button" value=3 onclick="input(3);" />
<br />
<input type="button" value=4 onclick="input(4);" />
<input type="button" value=5 onclick="input(5);" />
<input type="button" value=6 onclick="input(6);" />
<br />
<input type="button" value=7 onclick="input(7);" />
<input type="button" value=8 onclick="input(8);" />
<input type="button" value=9 onclick="input(9);" />
<br /><br />
<input type="button" value=backspace onclick="del();" />
<script>
function input(e) {
var myInput = document.getElementById("myInput”);
myInput.value = myInput.value + e.value;
}
function del() {
var myInput = document.getElementById("myInput");
myInput.value = myInput.value.substr(0, myInput.value.length - 1);
}
</script>
</body>
</html>
I am also thinking why do the buttons have different width, considering that Open Sans is a monospaced font...
Thank you.

<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<input id="myInput" type="text" />
<br /><br />
<input type="button" value=1 onclick="input(1);" />
<input type="button" value=2 onclick="input(2);" />
<input type="button" value=3 onclick="input(3);" />
<br />
<input type="button" value=4 onclick="input(4);" />
<input type="button" value=5 onclick="input(5);" />
<input type="button" value=6 onclick="input(6);" />
<br />
<input type="button" value=7 onclick="input(7);" />
<input type="button" value=8 onclick="input(8);" />
<input type="button" value=9 onclick="input(9);" />
<br /><br />
<input type="button" value=backspace onclick="del();" />
<script>
function input(e) {
var myInput = document.getElementById("myInput");
myInput.value += e;
}
function del() {
var myInput = document.getElementById("myInput");
myInput.value = myInput.value.substr(0, myInput.value.length - 1);
}
</script>
</body>
</html>

You need to use
var myInput = document.getElementById("myInput");
instead of
var myInput = document.getElementById("myInput”);
that's it.
Also value is e only not e.value.
myInput.value = myInput.value + e;

conflict between Native JS and jQuery

I was going through a text book and got caught up with a problem in an example.
Here's my html:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you click the "reversed check" button first, the "check all" and "check none" buttons won't work when you click them. Then I changed the codes under the click Event of button "reversed checked" to jQuery functions. Here's the revised js codes:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!!
});
});
})
In this case, if you manually check any checkbox, any of the three buttons won't work on that specific checkbox.
I suspect there's might be a subtle conflict between native HTML-JS attributes and jQuery functions.
I'd really appreciate some of you guys telling me the mechanism that leads to this malfunction. Thanks!

Don't set the attribute, set the property. (Which is what this.checked = ... is doing.) That is, use jQuery's .prop() method not .attr().
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

try this...
$(function(){
$("#checkAll").click(function(){
$("input[name=items]").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("input[name=items]").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("input[name=items]").each(function(){
this.checked = !(this.checked);
});
});
})
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>

javascript search box and edit font size

Here is a javascript for searching a certain database. The script generates a Search button to submit the query, is there a way to adjust the font/size of the text in this button?
<script src="http://www.bccls.org/js/jquery-1.7.2.min.js" type="text/javascript" ></script>
<script src="http://www.bccls.org/js/searchPolaris.js?v=2" type="text/javascript" ></script>
<form name="search" id="search" action="javascript:searchPolaris()">
<input name="query" type="text" id="query" style="width: 220px">
<input type="hidden" NAME="whichlibrary" id="whichLibrarySelected" value="119">
<br />
<input type="submit" value="Search" target="_blank">
<input type="hidden" name="newWindowCheck" id="newWindowCheck" value="newWindow">
</form>

You can with css:
input[type="submit"] {
font-size: 3rem; /* or whatever...*/
}
<script type="text/javascript" src="http://www.bccls.org/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.bccls.org/js/searchPolaris.js?v=2"></script>
<FORM name="search" id="search"
action="javascript:searchPolaris()">
<input name="query" type="text" id="query" style="width: 220px"><input type="hidden" NAME="whichlibrary" id="whichLibrarySelected" value="119">
<br />
<input type="submit" value="Search" target="_blank"><input type="hidden" name="newWindowCheck" id="newWindowCheck" value="newWindow">
</form>

Colour change buttons not work

<script language="javascript" type="text/javascript" src"change.js"></script>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name="Button1" value="BLUE" onclick="changecolor('blue')">
<input type="button" name="Button1" value="Green" onclick="changecolor('green')">
<input type="button" name="Button1" value="Yellow" onclick="changecolor('yellow')">
</form>
This code is saved as change.js
function changecolor(code) {
document.bgColor=code
}
The colour change buttons appear but does not work.

src"change.js" is missing an = sign. Should be src="change.js"

How to Pass toggled data on submit?

i have the following form
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<form method="POST" action="#" >
<input type="button" id="btn" value="1" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="2" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="3" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="4" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="5" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="6" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Here i want to use toggle action, i dont want to use checkbox here, I want to pass the toggled value from this form. Is there any way to do this?
in the same page i already have some checkbox with with check action enabled, here i want to pass max 3 toggled values, i have tried using radio box but that will work only for one, not with 3. how to do this.

Categories

Resources