Button doesn't trigger an event [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Please help me with the following code because I don't know what I am missing. A click on button Compute should trigger function computeAll(). Instead the script doesn't react to my actions:
the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="complex.js"></script>
</head>
<body>
<form name="calcul" method ="post">
<table>
<tr><th></th><th>Real part</th><th>Imaginary part(i)</th></tr>
<tr><td>Enter the first complex number</td><td><input type="text" name="real1"/></td>
<td><input type="text" name="imaginary1"/></td></tr>
<tr><td>Enter the secound complex number</td><td><input type="text" name="real2"/></td>
<td><input type="text" name="imaginary2"/></td></tr>
<tr><td>Enter your choice</td><td colspan="2"><div><p>Addition<input type="radio" value="add" checked name="option">
</p><p>Substraction<input type="radio" value="subs" name="option"></p></div>
</td></tr>
<tr><td >The answer is:</td><td><input type="text" name="displayReal"/></td><td><input type="text" name="displayImaginary"/></td></tr>
<tr><td colspan="3"></td></tr>
<tr>
<td><input type="button" value="Compute" onclick="computeAll()"></td>
<td><input type="button" value="Clear" onclick="clearAll()"></td>
</tr>
</table>
</form>
</body>
</html>
and java script code
<script type="text/javascript">
function computeAll() {
var val1, val2, img1, img2, resultR, resultI
val1 = parseInt(document.calcul.real1.value);
val2 = parseInt(document.calcul.real2.value);
img1 = parseInt(document.calcul.imaginary1.value);
img2 = parseInt(document.calcul.imaginary2.value);
if (calcul.option[0].checked){
resultR = val1 + val2;
resultI = img1 + img2;
document.calcul.displayReal.value = resultR;
document.calcul.displayImaginary.value = resultI;
}
if (calcul.option[1].checked){
resultR = val1 - val2;
resultI = img1 - img2;
document.calcul.displayReal.value = resultR;
document.calcul.displayImaginary.value = resultI;
}
}
</script>

Where is that <script> tag located? In the complex.js file referenced in <head>? You shouldn't need a <script> tag in a JavaScript file, which might be causing the issue. Check your browser's developer tools for any JS errors.

You don't need to put the javascript code inside <script type="text/javascript"> and </script> when you referenced as external file (as in <script src="complex.js"></script>). Delete that, and try again.

Related

Add comment below Header [duplicate]

This question already has answers here:
How do I add something to my html using javascript without erasing the whole page
(3 answers)
Closed 6 years ago.
Hey i got this Code and I would like to add comments below the heading.
But right now after i click the submit send the header and the button wipes away.
However I would like them to stay so that the text input will be displayed below the button.
Thank you in advance!
<html>
<body>
<h1>Add comment below</h1>
<label for="vname">Comment:
<input type="text" id="vname" name="vname">
<input type="submit" value="Submit" onclick="addComment()">
<script>
function addComment()
{
var vname = document.getElementById("vname").value;
document.write(vname);
}
</script>
</body>
</html>
<html>
<body>
<h1>Add comment below</h1>
<label for="vname">Comment:</label>
<input type="text" id="vname" name="vname">
<input type="submit" value="Submit" onclick="addComment()">
<ul id="comments"></ul>
<script>
function addComment()
{
var vname = document.getElementById("vname").value;
var li = document.createElement('li');
li.innerText = vname;
document.getElementById('comments').appendChild(li);
document.getElementById("vname").value = '';
document.getElementById("vname").focus();
}
</script>
</body>
</html>

Getting HTML DOM element and setting it to a value of a input tag

There is an element on my page with the id last_name. I would like to get its value and pass it along to my input tag.
I am essentially trying to do something like this (doesn't work).
<input type="hidden" name="lastName" value=document.getElementById("last_name").value>
Is there anyway to do this?
This is not only on load.
Essentially, I have a bunch of textboxes grouped together in a form.
Then I have another form with a button. When the user hits the button, I want my input tags' values be the current values entered in the textboxes.
EDIT: Thanks all! Got it work. I essentially had to remove the "value" attribute of the input tags and then add an "onclick" attribute to my button and then call those javascript codes you guys provided me.
for only loading page:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#lastName').val($('#last_name').val());
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
</body>
</html>
for button click:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#btn-save').on('click', function() {
$('#lastName').val($('#last_name').val());
// other work
return false;
}
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
<button id="btn-save">Save</button>
</body>
</html>
without jQuery use:
<script>
window.onload = function(){
var src = getElementById('last_name');
var dst = getElementById('lastName');
dst.value = stc.value;
}
</script>
Try this:
var lastName = document.getElementById("last_name");
var input = document.getElementById("yourInputId");
input.value = lastName.value;
Try the following code
HTML
<input type="hidden" name="lastName" id='hidLastName' />
and javascript code:
var input = document.getElementById("hidLastName")
input.value = document.getElementById("last_name").value
You should move the logic to a .js file or inside a <script></script> element. Preferrably the former. Try something like this:
Put an id to the receiving input:
<input type="hidden" id="lastName" name="lastName">
And this to your .js file
window.onload = function(){
var lastNameInput = document.getElementById('lastName');
var sourceInput = document.getElementById('last_name');
lastNameInput.value = sourceInput.value;
}
Try This:
Java Script
<script>
function setInput() {
document.getElementById("lastname").value = document.getElementById("last_name").value;
}
</script>
HTML
<input type="text" id="last_name" onblur="setInput()"/>
<input type="hidden" id="lastname" />

Split employee IDs separated by comma from textbox into array and then manipulate those strings [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm stuck with an idea for local image directory. We have a internal tool to lookup other employee's profiles and the url is url of image is like "https://internal-cdn.abc.com/profiles/images/empid=random_emp_id".
So I have used JS to get the images based on one emp_id by using html form to input emp_id and js to append the "https://internal-cdn.abc.com/profiles/images/empid="+form_element+">" and I used document.write to show the image.
Now I need you help to write JS which will classify the input list of emp_id's separated by comma into an array and manipulate the n strings in array to append the IMG SRC path to finally show multiple images.
Thanks in advance.
This Works
<html>
<head>
<script type="text/javascript">
function myFun(){
var imagesrc = document.getElementById("login");
image.value = "<img src=internal-cdn.abc.com/profiles/images/…;;
document.write(image.value); }
</script>
</head>
<body> <input type="text" name="login" id="login" placeholder="Enter the login" required="required" />
<input type="button" name="submit" onClick="myFun()" />
<div id="image">Image</div>
</body>
</html>
This Doesn't Work!
<html>
<head>
<script type="text/javascript">
function myFun(){
var text;
var i;
var login = document.getElementById("login");
login = login.split(",");
for (i = 0; i <=login.length; i++) {
text += "<img src=https://internal-cdn.abc.com/profiles/images/?empid=" + login[i] + "><br>";
}
document.getElementById("images").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" name="login" id="login" placeholder="Enter the login" required="required" />
<input type="button" name="submit" value="Get Images!" onClick="myFun()" />
<p id="images"></p>
</body>
You're trying to split an HTML element, not a string:
var login = document.getElementById("login");
login = login.split(",");
You want the value of the element, not the element itself:
var login = document.getElementById("login").value;
login = login.split(",");

Export / Save textarea value as html which is already called from another function

I have explored so many topics here but couldn't get answer yet. please help me to resolve my issue
I have created an html generator with different functions which giving me result in a textarea box. I want to export the textarea value into html file
<html>
<head>
<script type='text/javascript'>
function output() {
var lkpp = document['getElementsByName']('linkurl')[0]['value'];
var tpwa = document['getElementsByName']('imgrlink')[0]['value'];
var ttiwidget = document['getElementsByName']('widget.content')[0];
ttiwidget['value'] = ''+lkpp+''+tpwa+''
};
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td width='40%'>
<label for='linkurl' >value1</label>
</td>
<td width='60%'>
<input type='text' name='linkurl' value='' size='40'>
</td>
</tr>
<tr>
<td width='40%'>
<label for='imgrlink' >Value2</label>
</td>
<td width='60%'>
<input type='text' name='imgrlink' value='' size='40'>
</td>
</tr>
</table>
<br>
<input value='Generate' type='button' onclick='javascript:output();' />
<br>
<textarea name="widget.content" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()" readonly='readonly'></textarea>
</body>
</html>
I want to export/save the generated value into an HTML file.
Check this is my file
We need more info to give valid feedback. Precisely what is the roadblock?
Assuming the issue is getting the textarea content into a js variable: see this fiddle
You can get the value inside the Textarea with
document.getElementById('taGenerate').value;
After that, you can do whatever you want with it after that.
If you've made it that far, and your trouble is writing local fs: you will want to read this SO thread. Browser compatibility is going to be your biggest hurdle here.

How to write into a table with Javascript?

<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
document.getElementByID("plank").innerHTML = xp/30;
}
</Script>
So here is my code, and my problem is that I seem to be unable to write over data in a table with the id's planl, oakPlank, teakPlank, and mahoganyPlank. I am thinking that I may be making an obvious mistake to someone who has done this sort of thing before, but I can't seem to catch it. Any help is much appreciated, and here is a snippet of my table, if it helps:
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
EDIT: I didn't realize that this may be pertinent, my bad. This is the form I used to get input, which after putting an alert in to see if it could retrieve the XP, it functioned correctly:
<form name="experience" id="experience_frm" action="#">
Experience: <input type="text" name="XP" id="txt_XP"/>
<input type="submit" value="Go" onclick="getExperience();"/>
</form>
You have used the wrong document method. Javascript is case sensitive. You used:
document.getElementByID
for getting the id="plank" element. But you need to use:
document.getElementById
Notice the d (last character) change.
With this change, a simple example works for me:
http://jsfiddle.net/wqZAq/
Try This
<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
var newxp = parseInt(xp);
var div = newxp/30;
document.getElementById("plank").innerHTML = div;
}
</Script>
<table>
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
</table>
<input type="text" id="txt_XP" name="txt_XP" />
<input type="button" onclick="getExperience();" />

Categories

Resources