having trouble making my start button convert to stop - javascript

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();" />

Related

How to fetch text value from within iFrame

this my code :
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe" ></iframe>
</br>
<input type="button" value="Start" onclick="get()">
</br>
<input id="textid" type="text">
<script language="JavaScript" type="text/javascript">
function get() {
?????????????
}
</script>
in The text.txt file contains a value of (61.00%)
i want When press the Start button, I want to fetch the value (61.00%), and place it in the textinput (textid)
*Note that the value in the example (61.00%) is variable
Greetings :)
you can try below and make sure you access iframe in same domain
<script language="JavaScript" type="text/javascript">
function getPercent() {
var iframe = document.getElementById('iframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var percent = innerDoc.body.textContent.match(/(\d+\.\d+%)/g)
// ["17.00%", "0.00%", "61.00%"]
document.getElementById('textid').value = percent[2];
}
</script>
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
</br>
<input type="button" value="Start" onclick="getPercent()">
</br>
<input id="textid" type="text">
Here's how to do it with vanilla JS. I've swapped the inline JS for a more modern JS technique.
HTML
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
<button type="button">Start</button>
<input id="textid" type="text">
JS
// Cache the elements
const iframe = document.querySelector('#iframe');
const button = document.querySelector('button');
const input = document.querySelector('input');
// Add an event listener to the button
button.addEventListener('click', handleClick, false);
function handleClick() {
// Extract the textContent from the iframe content
const { textContent } = iframe.contentWindow.document.body;
// Update the input value
input.value = textContent;
}

Set var in javascript to values in tags

I'm trying to set a var in javascript to a value inside a tag.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to return the value of its value attribute.</p>
<button id="myButton" value="value1" onclick="myFunction()">1</button>
<button id="myButton" value="value2" onclick="myFunction()">2</button>
<p id="output"></p>
<script>
function myFunction() {
var x = document.getElementById("myButton").value;
document.getElementById("output").innerHTML = x;
}
</script>
</body>
</html>
The above code obviously doesn't work since id is unique so doesn't matter which button I click it will show "value1" regardless.
Is there a way to make it so that clicking the "1" button will show "value1" and the "2" button will show "value2"?
<button value="value1" onclick="myFunction(this)">1</button>
<button value="value2" onclick="myFunction(this)">2</button>
<script>
function myFunction(button) {
var x = button.value;
button.innerHTML = x;
}
</script>
You can use this inside function so it refers to element that is clicked
function myFunction(e) {
document.getElementById('output').innerHTML = e.value;
}
<p>Click the button to return the value of its value attribute.</p>
<button value="value1" onclick="myFunction(this)">1</button>
<button value="value2" onclick="myFunction(this)">2</button>
<p id="output"></p>

javascript not reading entered value in input box

I am unable to get the function AreaT() to verify and validate the entered value in the input box as the answer to the area of a triangle.
I keep getting "wrong" message even for the correct answer.
What am I doing wrong?
Thank you for taking the time to check my code.
<html>
<head>
<script>
var height = Math.floor(Math.random()*20 +1);
var base = Math.floor(Math.random()*30 +2);
var area = getElementById("area");
function AreaT(){
document.getElementById('height').value = height;
document.getElementById('base').value = base;
if(area== 1/2 * base * height){
document.write("correct")
}
else{
document.write("wrong");
}
}
</script>
</head>
<body>
<form>
<h2>HEIGHT:</h2><input type="button" size="20" id="height"/>
<h2>BASE: </h2><input type="button" size="20" id="base"/>
<h2>AREA: </h2>Enter The Area here:<input type="text" size="20" id="area"/>
<input type="button" size="20" value = "Calculate" onClick ="AreaT()"/>
</form>
</body>
</html>
Try this:
HTML
<body>
<h2>HEIGHT:</h2><input type="button" size="20" id="height"/>
<h2>BASE: </h2><input type="button" size="20" id="base"/>
<h2>AREA: </h2>Enter The Area here:<input type="number" size="20" id="area"/>
<input type="button" size="20" value = "Calculate" onClick ="AreaT()"/>
</body>
Javascript (put in <header> tag)
var height = Math.floor(Math.random()*20 +1);
var base = Math.floor(Math.random()*30 +2);
document.getElementById('height').value = height;
document.getElementById('base').value = base;
function AreaT(){
var area = document.getElementById("area").value;
if(area == 1/2 * base * height){
document.write("correct")
}
else{
document.write("wrong");
}
}
Adding on to what was already mentioned, you need to add a .value to the area element as well. I also changed the input type of AREA to number.
Change getElementById("area") to document.getElementById("area").value. You also need to assign area from inside your AreaT() function, otherwise it's not gonna get the value that the user typed in.
Also, your javascript needs to be below those form elements, otherwise it can't "see" them and you will get undefined values.

One button, changing ID for drawing

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.

Referencing and changing attributes of HTML button inside container

Below is the HTML code I am playing with. All it does is create an element with two buttons: "Element1" (TitleButton) and "Add". By clicking on "Add" the element is cloned and assigned id="element 2". What I am not able to do is assign value "Element2" for the TitleButton of the cloned element. How can I do it, preferably inside addNode() function? If it is not possible then what are other ways? Thanks
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function addNode(element) {
var adding_element = element.parentNode;
var added_element=adding_element.cloneNode(true);
added_element.setAttribute("id","element 2");
var cont = adding_element.parentNode;
cont.appendChild(added_element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<div name="container" id="container">
<div name="element 1" id="element 1">
<input type="button" value= "element1"; name="TitleButton" />
<input type="button" value="Add" name="add[]" onclick="addNode(this)" />
</div>
</div>
</FORM>
</BODY>
</HTML>
You can use firstElementChild property.
var id = 2;
function addNode(element) {
var adding_element = element.parentNode;
var added_element = adding_element.cloneNode(true);
added_element.setAttribute("id", "element" + id);
added_element.firstElementChild.setAttribute('value', 'element ' + id);
var cont = adding_element.parentNode;
cont.appendChild(added_element);
id++;
}
http://jsfiddle.net/SUkYg/1/

Categories

Resources