I try to make a line graph in Canvas,
I had a main.html and script in main.js (dosen`t matter what is inside - I will paste only the end of the code).
This is the end of main.js - plot,plot2,plot3 is a function to draw a line.
document.getElementById("button").onclick = plot; ///drawing line 1
document.getElementById("button2").onclick = plot2; //drawing line 2
document.getElementById("button3").onclick = plot3; //drawing line 3
document.getElementById("button4").onclick = plot4; //drawing ....
document.getElementById("button5").onclick = plot5; //drawing ...
In main.html i had
<input type="submit" name="button" id="button" value="Rysuj" /></td>
<input type="submit" name="button2" id="button2" value="Rysuj2" /></td>
<input type="submit" name="button3" id="button3" value="Rysuj3" /></td>
<input type="submit" name="button4" id="button4" value="Rysuj4" /></td>
<input type="submit" name="button5" id="button5" value="Rysuj5" /></td>
And when I press buttons Rysuj, Rysuj2, Rysuj3 all are drawing.
But i would like to make just 1 button like a 'Rysuj' and i try to change a ID after click but something dosn`t work.
In main.html I wrote:
<script language="text/javascript">
function something(){
document.getElementById("button").id = "button2"
}
</script>
<input type="button" onclick="something()" value="Rysuj" id="button">
What i should do to Make just a 1 Button which after click will change ID to button2, after next click to button3 etc ?
How about change draw line function of the first button after each click?
var arr = ['plot','plot2','plot3','plot4','plot5'];
var count=0;
document.getElementById("button").onclick = something;
function something(){
eval(arr[count%arr.length]+'();');
count++;
}
You can set counter:
<script language="text/javascript">
var counter = 1;
function something(){
document.getElementById("button").id = "button" + counter;
counter++;
}
</script>
And try to separate your javascript code and html. Inline js like onclick doesn't look like nice code.
Related
I need to change the background color for three buttons using Javascript. Below is the code:
<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">
<script>
function changeColor(this) {
this.document.getElementById("btn").style.backgroundColor = "red";
}
</script>
It works well for first button(Box 1).
When I click the second and third buttons, the background color of first button changes.
But I need to change the background colors of respective buttons that I have clicked.
Can anyone please help me to know where I was wrong?
The issue is that you are using same id for all the buttons. Use class instead.
Also, this is a reserved keyword and since you're using it as parameter name causes an error.
function changeColor(elem) {
elem.style.backgroundColor = "red";
}
<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">
Using this as a variable name causes a Javascript error, since this is a reserved keyword. Change this to the button variable (element in the snippet below) and pass it to your function.
Also - never set the same ID for multiple elements! This renders as an invalid HTML document.
Here's a working code snippet:
<input type="button" id="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn" value="Box 3" onclick="changeColor(this)">
<script>
function changeColor(element) {
element.style.backgroundColor = "red";
}
</script>
id need to be unique also in the function changeColor , this as an argument may not be relevant, you can provide any other name. In the function the argument elem will represent the context which has triggered the click event.
The the id from it and change it's style
function changeColor(elem) {
this.document.getElementById(elem.id).style.backgroundColor = "red";
}
<input type="button" id="btn1" value="Box 1" onclick="changeColor(this)">
<input type="button" id="btn2" value="Box 2" onclick="changeColor(this)">
<input type="button" id="btn3" value="Box 3" onclick="changeColor(this)">
Your function is always referencing the element with the id of btn, which all three of your inputs have.
Where you are passing (this) into your function, you should instead pass in the button's id.
In your function, you can then reference the id that was passed in:
function changeColor(id) {
document.getElementById(id).style.backgroundColor = "red";
}
Then, just change your onclicks to something more like onclick="changeColor('btn1')".
You may also want to consider adding a class to the element, as opposed to adding inline styling. This gives you more flexibility:
function changeColor(id) {
let btn = document.getElementById(id);
btn.classList.add('red-button');
}
Then just add some CSS:
.classList {
background-color: red;
}
Replace this into your param with whatever you want. Because this is a keyword which represents a context. Here it is window object.
function changeColor(element) {
element.style.backgroundColor = "red";
}
You should change the id to class because id has to be unique.
Try it like this:
<input type="button" class="btn" value="Box 1" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 2" onclick="changeColor(this)">
<input type="button" class="btn" value="Box 3" onclick="changeColor(this)">
<script>
function changeColor(this) {
element.style.backgroundColor = "red";
}
</script>
Here is a working snippet with 2 different solutions, the one you wanted to achieve, and a better one, where I suggest you to not use inline Javascript:
(See comments in my code)
function changeColor(elm) { // "this" is reserved keyword, changed to "elm"
elm.style.backgroundColor = "red"; // No need for getElement here, we already have it, it's "elm"
}
// Better solution: for no use of inline JS, do the following :
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
this.style.backgroundColor = "red";
});
}
<!-- I guess this one is waht you wanted to achieve -->
<input type="button" value="Box 1" onclick="changeColor(this)">
<!-- Changed id to class for the 2 next, to make it work without inline JS -->
<input type="button" class="btn" value="Box 2">
<input type="button" class="btn" value="Box 3">
Hope it helps.
I have two textfields with different IDs as shown
<textarea id="textfield">Hello World</textarea>
This will be updated with the content of the first textarea
<input id="messageID">
This is my script
<script type=text/javascript>
function() {
var value = document.getElementById("textfield").value;
document.getElementById('#messageID').val(value);
alert(value);
}
</script>
This is the onclick button and nothing happens when I click it
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Kindly assist!
Three things I'm seeing wrong:
.val(value); is a jQuery' method, not javascript... you should change it to .value = value;
to call onclick="myfunction()" you should name it: var myfunction = function(){
The document.getElementById() method doesn't need sharp # before the name.
Hope it helps.
Try something like this:
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById('messageID').value=value;
alert(value);
}
<input type="button" value="Alert" onclick="myfunction()" type="button" class="btn btn-danger" id="button"/>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
The most important catch is whenever you declare function on button click you should define that function inside javascript.
<script type=text/javascript>
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById("messageID").value = value;
alert(value);
}
</script>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Here you go a working fiddle
https://jsfiddle.net/blazeeboy/fNPvf/
Its inner Html you are trying to get
<textarea id="textfield">Hello World</textarea>
<input id="messageID"/>
<button type="button" class="btn btn-danger" id="button" onclick="myfunction()">Alert</button>
function myfunction(){
alert(1);
var v = document.getElementById("textfield").innerHTML ;
document.getElementById('messageID').innerHTML = v;
alert(v);
}
This is what i have so far
<script>
var robot = null
}
//**initiates movement
var moveRight = function(){
robot.style.left = parseInt(robot.style.left) + 10 +'px';
}
window.onload =init;
</script>
</head>
</html>
<body>
//initiates buttons convert for movement
<form>
<img id = "ted" src = "Ted.png"/>
<p>Click button to move image to right</p>
<input type = "button" value = "start" onlick = "moveRight"();"/>
</form>
You have a typo, syntax error in this line:
<input type = "button" value = "start" onlick = "moveRight"();"/>
That's invalid JavaScript and the attribute is called "onclick". Try this:
<input type="button" value="start" onclick="moveRight();" />
i have two buttons and alert functions on both buttons. i want that if user click on 1st button the function on 1st button should work but when user click the 2nd button then the function on 1st button should not not work i mean the function should not work on 1st button if user has clicked on 2nd button. below is the code but it is not working:
<script>
function abc(){
alert ("its a alert box!");
}
function xyz(){
var a=150;
alert(a);
}
<body>
<input type="button" value="submit 1" onClick="abc();">
<input type="button" value="submit 2" onClick="xyz();">
</body>
You could use jquery to unbind the click event for the first button when the second button is clicked. But you would need to add some id attributes so that you can do so easily.
<body>
<script>
function abc(){
alert ("its a alert box!");
}
function xyz(){
$('#btn1').unbind('click');
var a=150;
alert(a);
}
</script>
<input id="btn1" type="button" value="submit 1" onClick="abc();"></input>
<input id="btn2" type="button" value="submit 2" onClick="xyz();"></input>
</body>
You could also further refine your code to not rely on inline onclick attributes.
$(document).ready(function(){
$('#btn1').click(abc);
$('#btn2').click(xyz);
})
With jQuery (since it is one of the tags you gave to the post) you can work with unbind.
For starters, don't use inline click handlers. IMHO, something like this would be nicer:
<script>
$(document).ready(function(){
function abc(){
alert ("its a alert box!");
}
function xyz(){
var a=150;
alert(a);
}
var bt1enabled = true;
$('body').on('click', 'input[type=button]', function(){
if(this.id==="btn1" && bt1enabled) {
abc();
} else if (this.id==="btn2") {
btn1enabled = false; // or btn1enabled = !btn1enabled if this is supposed to toggle
xyz();
}
});
}):
</script>
<body>
<input id="btn1" type="button" value="submit 1"></input>
<input id="btn2" type="button" value="submit 2"></input>
</body>
try this
<div>
<input id="button1" type="button" value="Click1"/>
<input id="button2"type="button" value="Click2"/>
</div>
<script>
$('#button1').on('click', Button1Click);
$('#button2').on('click', Button2Click);
function Button1Click() {
alert("You have clicked button 1");
}
function Button2Click() {
alert("You have clicked button 2");
}
How to make the function only runs once per button?
if clicks in "click me" only works once, and the same for the other buttons.
Order not to put much code, I put an example..:
http://jsbin.com/apexod/2/edit
<input type="button" value="click me" onclick="hello('Jhon')"><br>
<input type="button" value="click me1" onclick="hello('Gerard')"><br>
<input type="button" value="click me2" onclick="hello('Kaoru')">
<script>
function hello(id){
alert("hello "+id);
}
</script>
A solution would be to register what buttons have been clicked :
<script>
var done = {}
function hello(id){
if (done[id]) return;
done[id] = 1;
alert("hello "+id);
}
</script>
(another one would be to use a utility lib like jQuery and its one function but this would be overkill for just that)
You can send the button element reference along to the function, and remove the event from the button:
<input type="button" value="click me" onclick="hello(this,'Jhon')"><br>
<input type="button" value="click me1" onclick="hello(this,'Gerard')"><br>
<input type="button" value="click me2" onclick="hello(this,'Kaoru')">
<script>
function hello(el, id){
alert("hello " + id);
el.onclick = null;
}
</script>
Demo: http://jsfiddle.net/Guffa/CDjGY/
Once executed you can override the function with an empty function
function hello(){
alert("hello " + id);
hello = function(){}
}