I am trying to read a local file called start.txt
If I reach a point where the first line is nextpage, it'll do something but if isn't it will append to a textarea. However it gives me an error:
Uncaught TypeError: Cannot read property 'inputtext' of undefined (23:44:44:520 | error, javascript)
at (public_html/index.html:12:50)
The file that I am trying to read is in the same folder as the index.html file. I am fairly new to HTML, AJAX and JavaScript so I might possibly just not know what the frak I am doing!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
var txtFile = new XMLHttpRequest();
var inputarea = document.textareaform.inputtext.value;
txtFile.open("GET", "http://localhost/start.txt", true);
txtFile.onreadystatechange = function() {
// Makes sure the document is ready to parse.
if(txtFile.readyState === 4) {
// Makes sure it's found the file.
if(txtFile.status === 200) {
allText = txtFile.responseText;
// Will separate each line into an array
lines = txtFile.responseText.split("\n");
for(i = 0; i < lines.length; i++) {
var s = lines[i];
if(s.indexOf("nextpage") > -1) {
// Line is there
} else {
// Line is not there
inputarea += s;
}
}
}
}
};
txtfile.send(null);
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="textareaform">
<textarea name="fileoutput" rows="4" cols="20" readonly="readonly">
</textarea>
</form>
<div>TODO write content</div>
</body>
</html>
It's looking for a textarea named "inputtext", and you've named it "fileoutput".
Try renaming your textarea to "inputtext":
<textarea name="inputtext" rows="4" cols="20" readonly="readonly"></textarea>
or
define your variable differently:
var inputarea = document.textareaform.fileoutput.value;
change the var inputarea declartion to this.
var inputArea = document.getElementsByName('fileoutput');
Hope this helps.
Related
The result of the following code is only 🧜🏽♂️ 🏾🏿🛀🛌🏻🏼🧑🤝👭👩👫👨👬, where I want to find all the unique graphic represationations shown in the Firefox output that I copied to the var a originally. (Basically the code should show the original a string as output.)
How to do that?
<html>
<head>
<meta charset="UTF-8" />
<script>
var a = '🧜🏽♂️ 🧜🏾♂️ 🧜🏿♂️ 🧜🛀🏿 🛌🏻 🛌🏼 🛌🏽 🛌🏾 🛌🏿 🧑🏻🤝🧑🏻 🧑🏻🤝🧑🏼 🧑🏻🤝🧑🏽 🧑🏻🤝🧑🏾 🧑🏻🤝🧑🏿 🧑🏼🤝🧑🏻 🧑🏼🤝🧑🏼 🧑🏼🤝🧑🏽 🧑🏼🤝🧑🏾 🧑🏼🤝🧑🏿 🧑🏽🤝🧑🏻 🧑🏽🤝🧑🏼 🧑🏽🤝🧑🏽 🧑🏽🤝🧑🏾 🧑🏽🤝🧑🏿 🧑🏾🤝🧑🏻 🧑🏾🤝🧑🏼 🧑🏾🤝🧑🏽 🧑🏾🤝🧑🏾 🧑🏾🤝🧑🏿 🧑🏿🤝🧑🏻 🧑🏿🤝🧑🏼 🧑🏿🤝🧑🏽 🧑🏿🤝🧑🏾 🧑🏿🤝🧑🏿 👭🏻 👩🏻🤝👩🏼 👩🏻🤝👩🏽 👩🏻🤝👩🏾 👩🏻🤝👩🏿 👩🏼🤝👩🏻 👭🏼 👩🏼🤝👩🏽 👩🏼🤝👩🏾 👩🏼🤝👩🏿 👩🏽🤝👩🏻 👩🏽🤝👩🏼 👭🏽 👩🏽🤝👩🏾 👩🏽🤝👩🏿 👩🏾🤝👩🏻 👩🏾🤝👩🏼 👩🏾🤝👩🏽 👭🏾 👩🏾🤝👩🏿 👩🏿🤝👩🏻 👩🏿🤝👩🏼 👩🏿🤝👩🏽 👩🏿🤝👩🏾 👭🏿 👫🏻 👩🏻🤝👨🏼 👩🏻🤝👨🏽 👩🏻🤝👨🏾 👩🏻🤝👨🏿 👩🏼🤝👨🏻 👫🏼 👩🏼🤝👨🏽 👩🏼🤝👨🏾 👩🏼🤝👨🏿 👩🏽🤝👨🏻 👩🏽🤝👨🏼 👫🏽 👩🏽🤝👨🏾 👩🏽🤝👨🏿 👩🏾🤝👨🏻 👩🏾🤝👨🏼 👩🏾🤝👨🏽 👫🏾 👩🏾🤝👨🏿 👩🏿🤝👨🏻 👩🏿🤝👨🏼 👩🏿🤝👨🏽 👩🏿🤝👨🏾 👫🏿 👬🏻 👨🏻🤝👨🏼 👨🏻🤝👨🏽 👨🏻🤝👨🏾 👨🏻🤝👨🏿 👨🏼🤝👨🏻 👬🏼 👨🏼🤝👨🏽 👨🏼🤝👨🏾 👨🏼🤝👨🏿 👨🏽🤝👨🏻 👨🏽🤝👨🏼 👬🏽 👨🏽🤝👨🏾 👨🏽🤝👨🏿 👨🏾🤝👨🏻 👨🏾🤝👨🏼 👨🏾🤝👨🏽 👬🏾 👨🏾🤝👨🏿 👨🏿🤝👨🏻 👨🏿🤝👨🏼 👨🏿🤝👨🏽 👨🏿🤝👨🏾 👬🏿 🏻 🏼 🏽 🏾 🏿 ';
var b = [...new Set([...a])];
var c = b.join('');
function init() { document.getElementById('result').innerHTML = c; }
</script>
</head><body onload="init()">
<span id="result"></span>
</body>
</html>
I'm trying to make a program where if you for example type in "less" in the textarea the output should show "<". What is the best way to do this?
This is how far I've gotten:
<!doctype html>
<html lang="en">
<head>
<title>Group 7 - Deckcode to JavaScript</title>
</head>
<body>
<h1>Group 7 - Deckcode to JavaScript</h1>
<p>Input your deckode below:</p>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Translate</button>
<p id="demo"></p>
<script>
function myFunction() {
var input
if (myTextarea == "less") {
console.log("<");
}
}
</script>
</script>
</body>
</html>
You're trying to fish values out of the DOM incorrectly. Use document.getElementById to locate the element in the DOM, and take its value for the value you require.
function myFunction() {
var textAreaValue = document.getElementById("myTextarea").value;
if (textAreaValue == "less") {
console.log("<");
}
}
I suggest using an object like this:
var translations = {};
translations["less"] = "<";
translations["greater"] = ">";
And then in your function you do like this:
function myFunction() {
var value = document.getElementById("myTextarea").value;
console.log(translations[value] ? translations[value] : "No translation found");
}
It would also be easy to add more translations e.g. based on data from a database or similar.
as and alternative to IF-condition, you can use
if (textAreaValue.indexOf("less") > -1) {
console.log("<");
}
so if the text area contains "less" text then the console prints "<"
indexOf method
i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>
I have an html form and a js script that gets the value of a textarea. However, when I'm getting the value of the textarea with javascript it return "undefined".
I have the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery/jquery-1.9.1.min.js"></script>
<script src="contentForm.js"></script>
</head>
<body>
<form method="post" >
<textarea name ="editor" id="editBox" rows="5" cols="2">type</textarea>
<p><input type="submit" id="submit" value="Submit"></p>
</form>
</body>
</html>
JS
function add() {
$("#submit").click(function() {
document.write("hello motto");
var message = "start js";
console.log(message);
var contents = $("#editBox");
var a = contents.val();
if(a === undefined) {
console.log("contents undefined");
}
console.log(contents);
var item = {"id":"12", "content": contents};
var obj = JSON.stringify(item);
var obj2 = JSON.parse(obj);
console.log("you have arrived");
document.write(obj2.id);
});
}
$(document).ready(function () {
add();
});
I tried the following to get the value of the textarea:
var content = $("#editBox").val();
and
var contents = $("textarea#editBox").val();
The val of the textarea is always undefined, with each of the methods I tried.
Is there another method for retrieving the value of a textarea?
Running document.write on a closed document will open a new document and destroy the DOM of the existing one.
This destroys the textarea, so when you try to retrieve it to get the value, it does not exist.
Remove the line document.write("hello motto");.
Use DOM manipulation to edit the existing document, instead of writing a new one.
I have function that opens up a window, and the values from the newly opened window are listed in the opener window.
The 2nd window - has this function:
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
opener.jQuery("#r_docs").append(jQuery(html));
}
The function that calls the one above is:
function addRefDoc(){
var count = 0;
var ref_docarray ;
var ref_noarray ;
<%for(int i1=0; i1<vec.size(); i1++) {
prop = (Properties) vec.get(i1);
String ref_no = prop.getProperty("referral_no","");
String ref_name = (prop.getProperty("last_name", "")+ ","+ prop.getProperty("first_name", ""));
%>
if(document.getElementById("refcheckbox_<%=ref_no%>").checked) {
count++;
if ((ref_doctor!=null)&&(ref_doctor!="")&&(ref_docno!=null)&&(ref_docno!="")) {
ref_docarray = ref_doctor.split(";");
ref_noarray = ref_docno.split(";");
if ((containsElem(ref_docarray,"<%=ref_name%>"))||(containsElem(ref_noarray,<%=ref_no%>))) {
alert("Referral doctor " + "<%=ref_name%>" + " already exists");
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
} else {
AddOtherRefDoc("<%=ref_name%>", <%=ref_no%>);
}
}
<%} %>
self.close();
}
function containsElem(array1,elem) {
for (var i=0;i<array1.length;i++) {
if(array1[i]==elem){
return true;
} else{
return false;
}
}
}
When this function is called, it is supposed to carry the 2 input elements "ref_docs" and "ref_nos" into the page that opened this window. But it is not doing so. It lists the elements alright but when I try to use "ref_docs" and "ref_nos" in another Javascript function in the 1st window, I see that "ref_nos" and "ref_docs" are empty.
What am I doing wrong?
function updateRd(){
var ref_docs = jQuery("#updatedelete").find('input[name="ref_docs"]');
var ref_nos = jQuery("#updatedelete").find('input[name="ref_nos"]'); alert(ref_docs.val() + ref_nos.val());
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";")); }
–
This function returns an error saying "ref_docs" and "ref_nos" are undefined.
I think it is trying to use the jQuery on the other page to find "#r_docs" on the current page.
Try:
jQuery(opener.document).find("#r_docs").append(html);
UPDATE:
I created index.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
window.jQuery = jQuery;
function openChild ()
{
var mychildwin = window.open("child.html");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="openChild();" />
<div id="r_docs">
Redocs here.
</div>
</body>
</html>
and child.html:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript">
function AddOtherRefDoc(name, number) {
var remove = "<a href='javascript:void(0);' onclick='removeRefDoctor(this)'>Remove</a>";
var html = "<li><b> Referral Doctor: </b>"+name+"<b>, Referral No: </b>"+number+ " " +remove+" <input type='text' name='ref_docs' value='"+name+"'></input><input type='text' name='ref_nos' value='"+number+"'></input></li>";
jQuery(opener.document).find("#r_docs").append(html);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="AddOtherRefDoc('name', 42);"/>
</body>
</html>
UPDATE2:
in your update function document.updatedelete has no attributes ref_docs and ref_nos.
try:
jQuery("#updatedelete")
.find('input[name="ref_docs"], input[name="ref_nos"]')
Where your form is
<form id="updatedelete" ... >
Your function that accesses the DOM elements is incorrect. updatedelete is not a property of document, nor will accessing a ref_docs or ref_nos property automatically build a collection of input elements. Since you're using jQuery already, try this:
var ref_docs = $('input[name="ref_docs"]');
var ref_nos = $('input[name="ref_nos"]');
That will give you Array (or at least array-like) objects that will let you access your inputs:
var rdocs = new Array();
var rnos = new Array();
ref_docs.each(function() { rdocs.push($(this).val()); } );
ref_nos.each(function() { rnos.push($(this).val()); } );
$('#r_doctor').val(rdocs.join(";"));
$('#r_doctor_ohip').val(rnos.join(";"));