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}));
Related
I have a radio button with specific values that I want to include in my URL parameters for the following pages (more than one). I have the parameters set up in the JS as var params.
in my, if-statement I have a console.log and location.href set to the next page desired based on the result.
my issue is when I press the button it takes me to the page but not with the desired parameters.
I also have 5 pages for each result following this page. how can I append the parameters to the following pages?
EPP1.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Custom Evaluation Portal</title>
</head>
<body>
<div id="bodyText"></div>
<form id="myForm" action="EPV3.html" method="get">
<div id="pBFContainer">
<div id="bodyFOption1">
<label for="email">Enter email address:<p></label>
<input type='text' id='inputEmail' name='email' size="70"></input></div>
<div id="bodyFTitle2"></div>
<div id="bodyFOption2">
<label for="testType">Choose the test theme for your evaluation:<p></label>
<input id='rb1' class="optionT" type='radio' name='testType' value='voip' checked>VoIP<p>
<input id='rb2' class="optionT" type='radio' name='testType' value='bandwidth'>Bandwidth<br><br>
</div>
<div id="bodyFTitle3"></div>
<div id="bodyFOption3"></div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>
</body>
<script type="text/javascript" src="EPP1.js"></script>
</html>
EPP1.js:
window.addEventListener("load", () => {
let qs = decodeURIComponent(location.search.substring(1));
let params = new Map();
let parts = qs.split("&");
parts.forEach((part) => {// i got this from a tutorial and liked it
let key = part.split("=")[0];
let val = part.split("=")[1];
params.set(key, val);
});
if (params.get("testType") == "voip") {
console.log("testtype is voip");
window.location.href = "EvalPortalV3.html";
} else if (params.get("testType") == "bandwidth") {
console.log("testtype is bandwidth");
window.location.href = "EvalPortalB3.html";
}
});
I am trying to create a calculator that solves the Pythagoras theorem. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
add a span after the button to contain the final result:
<span id="final-result"></span>
add an onclick event to your button, it might look like this:
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function :
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior. Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.
and here is the code what you are trying to make
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="formOne">
<input type="number" required placeholder="1st legnth" id="first">
<br> <br>
<input type="number" required placeholder="2nd legnth" id="second">
<br> <br>
<button type="submit">Give me the answer</button>
</form>
</body>
<script>
let form = document.querySelector("#formOne");
let inputOne = document.querySelector("#first");
let inputTwo = document.querySelector("#second");
form.addEventListener("submit", function(e){
e.preventDefault();
console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
})
</script>
</html>
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
You can try like this:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="form">
<input type="text" id="first_length" name="first_length" />
<input type="text" id="second_length" name="second_length" />
<input type="submit" value="Submit" />
</form>
<script>
function logSubmit(event) {
event.preventDefault();
var first_length = document.getElementById("first_length").value;
var second_length = document.getElementById("second_length").value;
var final = solveforHyp(first_length, second_length);
console.log(final);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);
function solveforHyp(a, b) {
var c = a * a + b * b;
return Math.sqrt(c);
}
</script>
</body>
</html>
I need to the add a JavaScript variable to a link in action form. Is that possible?
JavaScript function:
<script>
function parameter()
{
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
return vars;
}
var vpid = getUrlVars()["pid"];
}
//var link = "second_02.html" + pid.toString();
</script>
And in my form I need to add the variable 'link' to a form action, as follows:
<form action='second_02.html + ?pid=vpid&' id="sky-form" class="sky-form">
You'll need to do that programmatically via JavaScript.
After this line...
var vpid = getUrlVars()["pid"];
Add this one...
document.getElementById('sky-form').action = 'second_02.html?pid=' + vpid;
Given the nature of the content of vpid, then you could implements this in the load event of your window.
ALTERNATE METHOD 1
Here's an alternate method of doing what you appear to require, but it requires you to set the new location with the calculated parameter. You can amend the lines that try to get the text from the textbox, with whatever you need to append to your URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function validateForm() {
//alert('Validating form...');
var text = document.getElementById('txtValue').value;
text = escape(text);
location.href = 'test.html?param=' + text;
return false;
}
</script>
</head>
<body>
<form id="frmTest" method="get" action="" onsubmit="return validateForm();">
<input id="txtValue" type="text" value="foobar">
<input id="btnSubmit" type="submit" value="Submit">
</form>
</body>
</html>
ALTERNATE METHOD 2
This method allows you to continue to use your form, even with its GET method, but you set the value of a hidden field, that will then be appended to the URL in the querystring during submission.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function validateForm() {
//alert('Validating form...');
document.getElementById('hidTest').value = 'some calculated value';
return true;
}
</script>
</head>
<body>
<form id="frmTest" method="get" action="" onsubmit="return validateForm();">
<input id="txtValue" type="text" value="foobar">
<input id="btnSubmit" type="submit" value="Submit">
<input name="hidTest" id="hidTest" type="hidden" value="testIt">
</form>
</body>
</html>
I have a textbox having id=add, a div having id=get and a button named Add. Now I'm trying to enter values in textbox, save them in to an array and then save that array elements in the div tag (using javascript). But I'm unable to do so. Please help.
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new array();
data= document.getElementById('add').value;
function copy()
{
document.getElementById('get').innerHTML=data;
// document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" name="add" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>
Update your code as,
<html>
<head>
<title>Content</title>
<script language="javascript">
function copy() {
var data = document.getElementById('add').value;
document.getElementById('get').innerHTML += data + "<br/>";
}
</script>
</head>
<body>
<input type="text" name="add" id="add" />
<input type="button" name="but1" onclick="copy()" value="Add" />
<div id="get" class="keyword">
</div>
</body>
</html>
PS:Array (not array) is not required here,
This is because data doesn't have any value, you are trying to read the value of the text box before setting a value and also it should be Array()
Try this instead
function copy()
{
var data = new Array();
data= document.getElementById('add').value;
document.getElementById('get').innerHTML=data;
}
JsBin
Three issues in your code:
array() is not recognized in javascript, it's Array().
You are trying to read the value of the text box before a value can be set to it here:
data= document.getElementById('add').value;
function copy(){
It should be:
function copy()
{
data[0]= document.getElementById('add').value;
data is an array. If you want to store a value, it should be used with an index.
JSFiddle
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new Array();
function copy()
{
data = document.getElementById('add').value;
document.getElementById('get').innerHTML = data; document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>
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;