This code fails to insert text into the textarea - see html below. I can't change the html - because this snippet is mimicing a real web page. I just need to insert text into a textarea.
It doesn't work in Chrome or IE9.
Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function insert_text() {
//enumerate div sections and find where id = WIN_0_4
var div = window.document.getElementById("WIN_0_4");
if(div !== null)
{
var txtbox = div.getElementsByTagName('textarea');
if(txtbox !== null)
txtbox.value = document.frm.texttoinsert.value;
}
}
</script>
<form name="frm">
<input type="button" id="clicker" value="Click me" />
<input type="button" value="insert" id="inserter" onclick="insert_text();" />
<input type="text" name="texttoinsert" />
</form>
<div id="WIN_0_536870917" arid=536870917 artype="View" ardbn="View Field2" class="arfid536870917 ardbnViewField2" style="color:#0000FF">
some text here
</div>
<div id="WIN_0_4" arid=4 artype="Char" ardbn="Assigned To">
<label id="label4" class="label f6">Assigned To</label>
<textarea class="text sr " wrap="off" id="arid_WIN_0_4" cols="20" maxlen=254 arautocak=0 arautoctt=400 rows=1></textarea>
</div>
</body>
</html>
Replace
var txtbox = div.getElementsByTagName('textarea');
with
var txtbox = div.getElementsByTagName('textarea')[0];
Or better :
var txtbox = document.getElementById('arid_WIN_0_4');
As the name implies, getElementsByTagName returns more than one element.
txtbox[0].value = document.frm.texttoinsert.value;
Related
I'm trying to create a bookmarking html file for personal use. It uses the javascript "string.link()" method. The problem is it only outputs once. I'd like it to loop and collect all the links I enter.
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmarks</title>
<script>
function toURL() {
debugger
var strText = document.getElementById("url_descrip").value;
var strText1 = document.getElementById("url").value;
var result = strText.link(strText1); // url address
document.getElementById("itemlist").innerHTML = result;
}
</script>
</head>
<body>
<form>
<input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
<input type="text" name="URL" id="url" placeholder="URL">
<input type="button" value="Submit" id="btnSubmit" onclick="toURL()">
</form>
<div>
<ol id="itemlist"></ol>
</div>
</body>
</html>
As far as I understand you want to add this links to the #itemlist.
Just use
document.getElementById("itemlist").innerHTML += result + '<br />';
This will add the result to the already existing content of #itemlist and adds a line break after it to get every link in a new line.
You need to save your file somewhere and you need to be able to read it again.
For now, to just be able to show a list, you can do this
document.getElementById("itemlist").innerHTML += '<li>' + result + '</li>'
or something more savable:
const links = [];
document.getElementById("urlForm").addEventListener("submit", function(e) {
e.preventDefault();
var strText = document.getElementById("url_descrip").value;
var strText1 = document.getElementById("url").value;
links.push(strText.link(strText1)); // url address
document.getElementById("itemlist").innerHTML = `<li>${links.join("</li><li>")}</li>`
})
<form id="urlForm">
<input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
<input type="text" name="URL" id="url" placeholder="URL">
<input type="submit" value="Submit">
</form>
<div>
<ol id="itemlist"></ol>
</div>
Change
document.getElementById("itemlist").innerHTML = result;
to
document.getElementById("itemlist").append(Object.assign(document.createElement('li'), {innerHTML: result}));
My code is below. Trying to create a simple form for an assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
Whenever I press the button in the browser, nothing happens. Where am I going wrong?
There are two mistakes first it's onclick with a small c not onClick.
Second you are missing a + after last
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo() {
var first = document.forms["formInfo"]["first"].value;
var last = document.forms["formInfo"]["last"].value;
var applicantInfo =
"My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
}
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>
My first name is
<input name="first" type="text" id="first" title="first" />
</p>
<p>
My last name is
<input name="last" type="text" id="last" title="last" />
</p>
<p>
<input type="button" value="Send Information" onclick="getInfo();" />
</p>
</form>
</div>
<div id="info"></div>
</body>
</html>
This code works, here is the JSFIDDLE
You were simply missing a concatenation operator(+) toward the end of your variable assignment.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){
var first =
document.forms["formInfo"]["first"].value;
var last =
document.forms["formInfo"]["last"].value;
var applicantInfo = "My first name is " + first + " My last name is " + last + ".";
document.getElementById("info").innerHTML = applicantInfo;
};
</script>
</head>
<body>
<div>
<form id="formInfo" name="formInfo">
<p>My first name is <input name="first" type="text" id="first" title="first"></p>
<p> My last name is <input name="last" type="text" id="last" title="last"></p>
<p><input type="button" value="Send Information" onClick="getInfo()"></p>
</form>
</div>
<div id="info">
</div>
</body>
</html>
I have the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.
<script>
window.onload = function(){
var val = document.getElementById('value1').innerHTML;
document.getElementById('result').innerHTML = val;
};
</script>
Any ideas?
You have to use .value property of the input field instead of innerHTML. so it would be:
var val = document.getElementById('value1').value;
and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.
You can try adding a button with onClick event to execute this function in place of using window.onload
HTML controls you are working on are textboxes, so they have a value property, not innerHTML.
Use this:
var val = document.getElementById('value1').value;
document.getElementById('result').value= val;
You can't get the value of an input element using the innerHTML attribute. Use value instead:
var val = documento.getElementById('value1').value;
Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.
The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<button onclick="printOutput()">Click</button>
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
Then in your script.js you would have,
function printOutput(){
var val = document.getElementById('value1').value;
document.getElementById('result').innerHTML = val;
}
when the submit is clicked to put that value in the output
You have chosen wrong event window.onload, also you need .value instead of .innerHTML
Option 1: using jQuery, as you already have the import
$(function() {
$('input[type="submit"]').on('click', function(e) {
$('#result').val($('#value1').val());
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
Option 2: using plain js
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
document.querySelector('#result').value = document.querySelector('#value1').value;
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
<script>
$( document ).ready(function() {
setTimeout(function(){
var val = document.getElementById('value1').innerHTML;
var generateHere = document.getElementById("result");
generateHere.innerHTML = val;
}, 2000);
});
</script>
I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>
I am trying to create a simple alphabetizer using HTML's textarea and JavaScript. The user enters their words in the input textarea and when a button is pressed, the alphabetized list will show up on the output textarea. I can't seem figure out how to make it work. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />
<title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>
<button onclick="alphabetize()">Alphabetize!</button>
<textarea input="inputText" rows=5 cols=80 wrap=on></textarea>
<textarea output="outputText" rows=5 cols=80 wrap=on readonly></textarea>
<script>
var textarea = document.getElementById("input");
function alphabetize() {
textarea.value = textarea.value.split(" ").sort().join(" ")
}
</script>
</body>
</html>
Whenever I click on the alphabetize button, I get the message "TypeError: textarea is null". There is no output on where the output textarea.
You messed up your textareas' IDs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />
<title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>
<button onclick="alphabetize()">Alphabetize!</button>
<textarea id="inputText" rows=5 cols=80 wrap=on></textarea>
<textarea id="outputText" rows=5 cols=80 wrap=on readonly></textarea>
<script>
var textarea = document.getElementById("inputText");
var textarea2 = document.getElementById("outputText");
function alphabetize() {
textarea2.value = textarea.value.split(" ").sort().join(" ")
}
</script>
</body>
</html>