Breadit here and I have a problem. I tried to look everywhere but can't find a single answer that will work. I am trying to make a button which will square the first tag and will print the output on the second tag.
JavaScript:
function square() {
var a=document.getElementById("inputSquare");
var b=a*a;
document.getElementById("outputSquare").value=b;
}
HTML:
<input type="number" id="inputSquare">
<button onclick="square()">=</button>
<input type="number" id="outputSquare" readonly>
That is my problem.
Try this:
function squaree() {
var a=document.getElementById("inputSquare").value;
var b=a*a;
document.getElementById("outputSquare").value=b;
}
Also. you have to put the code in <script> tag inside head. Not in dom load or jquery ready function. Check it out here: https://jsfiddle.net/q7oms4nh/
need to have var a = document.getElementById("inputSquare").value
EDIT: What nevermind said.
Related
so I'm kind of a beginner at JavaScript and APIs, things like that. I want to implement an API into my website that can detect whether an article is fake news or not based on the title. I already found the API, which is this, but I'm a bit confused with how to retrieve the form value from my HTML code, shown below:
<input type="text" name="check" id="check">
<button onClick="checkFakeNews" id="btn">Check</button>
<p id="result"></p>
I already tried typing up this function:
function checkFakeNews() {
document.getElementById('check') = text
console.log(text)
}
to try to print out the value, but I didn't get anything.
I also want to get the result, stored in 'data' in the API I believe, and display it in the paragraph. I'd be very grateful to anyone who can help me!
Firstly, You are you writing document.getElementById('check') = text which doesn't do anything.
Second thing that in HTML onClick need to be equal to Function Call you are passing just the Name. You need checkFakeNews() instead of checkFakeNews
This should work as required.
function checkFakeNews() {
const input = document.getElementById('check');
const text = check.value;
console.log(text);
}
<input type="text" name="check" id="check">
<button onClick="checkFakeNews()" id="btn">Check</button>
<p id="result"></p>
https://www.javatpoint.com/document-getElementById()-method , and see https://www.w3schools.com/jsref/prop_text_value.asp
var s = document.getElementById("element").innerHTML; //to set
document.getElementById("myText").value = "Johnny Bravo"; to set
{include file="head.tpl" title="Combate"}
{include file="navBar.tpl" dir=$dir}
<table id="CombatLister">
</table>
Nombre: <input type="text" id="nombrePJ">
AC <input type="number" id="ACPJ">
Iniciativa <input type="number" id="Init">
<button id="añadirParty" onclick="addPJButt()">Añadir</button>
<script>
function addPJButt(){
var name=document.getElementById("nombrePJ").value;
var ac=document.getElementById("ACPJ").value;
var iniciativa=parseInt(document.getElementById("Init").value);
addPJ(name,ac,iniciativa);
}
function addPJ(nombre,ac,init){
var table=document.getElementById("CombatLister");
var row=table.insertRow(0);
var cellNombre=row.insertCell(0);
var cellInit=row.insertCell(1);
var cellAc=row.insertCell(2);
cellNombre.innerHTML=nombre;
cellInit.innerHtml=init;
cellAc.innerHtml=ac;
}
</script>
<script>
{$x=0}
{foreach $party as $pj}
addPJ({$pj.nombre},{$pj.ac},{$pj.init})
{/foreach}
</script>
I have a smarty template that using an array from another page, adds it to the "CombatLister" table. however, for some reason, the addPJ() Script does not run. Im just learning the ropes of Javascript, so maybe im skipping something, but so far, i've got no answers on why it does not work.
I tried to check if the addPJ() script was wrong, using the addPJButt(), but the script is working: When i put data on the input types up there, they add the name correctly.
I dont think its a problem of Smarty. checking the source code of the page its similar, writting this where i call $pj:
<script>
addPJ(Galahad,14,5);
</script>
PS: As an extra problem, but not so important, on the insertCell methods of addPJ only the first cell is added.
addPJ(Galahad,14,5); is looking for an undefined variable Galahad.
you need to quote it so it gets printed as javascript string
Try
addPJ('{$pj.nombre}',{$pj.ac},{$pj.init})
Note: I haven't worked with smarty in years and assume the quotes will be literals
I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.
Why won't this short example work? I am trying to get a total calculated on the fly, but it seems the function's aren't updating the total box.
In my actual work I am using radio buttons to update the pricing on the fly (rather than the button shown here), which each have an onclick function applied.
http://jsfiddle.net/jvEDt/1/
Any help would be amazing! Thanks very much
Your order total: <input type="text" id="totalbox" name="totalbox" size="10" maxlength="10" readonly="readonly" value="0.00" /><br>
<input name="Order" type="submit" value="Order" onclick ="JavaScript: calculateTotal();">
function calculateTotal()
{
var total = "5.00";
var totalbox = document.getElementById('totalbox');
totalbox.value = "£" + total;
}
There are different settings in jsFiddle how the javascript should be treated.
onLoad
This executes the script when the body has loaded:
<body onLoad="<your script>">
No wrap - in head
This inserts the script in the head section:
<head>
Your script
</head>
In your case you don't want to execute the script but rather include it on the page so that it's globally available. No wrap - in head is the setting you should use.
You can define your function at run-time:
calculateTotal = function()
{
// your code
}
Or you can change the place Javascript is loaded in the jsfiddle to No wrap as said in other answers.
Check this thread about run-time and parse-time defined functions: var functionName = function() {} vs function functionName() {}
additionaly:
<input name="Order" type="button" value="Order" onclick="calculateTotal();">
No spaces, no JavaScript: etc.
Ok, so I'm REALLY new to programming and javascript, but I'm having a problem with this little string of code. The thing that is bothering me about it, is that I have done things similar to this in other programs, but it's just not working right in this specific little part of this program. Here is basically what isn't working:
<html>
<script type="text/javascript">
function test()
{
var myTextField = document.getElementById('myText');
document.write (myTextField);
}
</script>
<form>
<input type="text" id="myText">
<input type="submit" value="submit" OnClick="test()">
</form>
</html>
When I do this, it returns [object HTMLInputElement] instead of the value of that text field. Thanks for any help cause I'm most of you know this. :P
getElementById returns the Object itself, which has many methods and properties as members.
You need to reference the value property, like this:
document.getElementById('myText').value;
That should work :)
Also, here's a general reference: https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
Try:
document.write (myTextField.value);
function test()
{
var myTextField = document.getElementById('myText').value;
alert(myTextField);
// or
console.log(myTextField);
}
You should not use document.write here, as you document is already loaded. Document.write will remove the page.