Make certain numbers inputted by the user sub/sup-string - javascript

I have a code, where the user can input some text and when they press the button the text will get insertet further down on the page for later use.
But before it goes down there I'd like to make certain numbers subscript, or supscript if they type "_" or "^" before the number.
My code looks something like this:
function moveText() {
var string = document.getElementById("input").value;
var node = document.createTextNode(string);
var para = document.createElement("p");
para.appendChild(node);
var element = document.getElementById("output");
element.appendChild(para);
}
<! DOCTYPE HTML >
<body>
<div>
<!-- I have included an example of what a user might write -->
<input type="text" id="input" value="1 _2 3 _4 ^5">
<input type="button" value="insert" onclick="moveText()">
</div>
<div id="output">
<!-- This is where the text goes when the button is pressed -->
<!-- When the text goes here I'd like all numbers following a "_" to be subscript and "^" to be supscript -->
</div>
</body>
Any ideas?
Thanks in advance

Related

How to print the values in the same input text field using JS

I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>
There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10

Why am I getting a [object HTMLInputElement] in my Javascript code?

I'm working on a project that I can't get my head around. Fairly new to Javascript, so it isn't too surprising. What I'm attempting is to have a user input their name in the html document, have my javascript file record that name to a variable called userName, then have the next label that appears on the following question add their name to the label for customization. My javascript source file is stored in the same folder as the index.html and is linked in the head of the html file as:
I've included more than is strictly necessary just to show the initializations. Before clicking the button, my 2nd label looks like:
Who are you adventuring with? (Select all that apply)
Solo Couple Family Small Group Large Group
After I click it, it shows:
Thanks [object HTMLInputElement]. who are you going on an adventure with?
First time using stackoverflow, so if I did this wrong let me know.
HTML Section
<!-- Creates app container-->
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
Javascript File
// Declarations
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
When you use getElementById It returns the HTMLInputElement which you are getting.
An Element object describing the DOM element object matching the
specified ID, or null if no matching element was found in the
document. - MDN
So you need the value
let userName = document.getElementById("inputName").value;
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
or
let userName = document.getElementById("inputName");
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
}
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
<div id="lblGroupSize"></div>
</div>
There are few thing you got wrong here.
html -
<html>
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<label id="lbl"></label>
<br />
</div>
</div>
</html
javascript -
function getGroupSize() {
let lbl = document.getElementById("lbl");
let userName = document.getElementById("inputName").value;
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
things to note,
Get the value from a HTML , use .value attribute.
Don't declare same variables multiple times.

generate textboxes based on number enter by user

I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.

how to get a random user input variable to return in html

Ok so basically what i'm trying to do is create an html document that allows the user to input any thing they want with any number of choices and click a button and get one of the things they typed in to be chosen at random. My girlfriend is really indecisive and sometimes takes hours to make a choice when i'm not around so i thought i'd write her a code to help. I'm not exactly sure how to go about this. I have searched around for a few hours and have found nothing about this. Sorry if it's something extremely simple but any help would be greatly appreciated. So far i have this as a code to get a text box and make a new one appear by clicking the button
`
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
document.body.insertBefore(document.createElement("br"), element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>`
I think this should work:
HTML:
<input type="button" value="Get Random" onclick="selectRandomInput();"/> <!-- select a random element among [1,instance] elements. -->
JS:
function selectRandomInput(){
var selectedId=Math.floor(Math.random()*instance+1);
for(var i=0;i<document.getElementsByTagName("input").length;i++){
element=document.getElementsByTagName("input")[i];
if(element.id!=selectedId && element.type!="button")
element.style.display="none";
}
}
PS: A better solution is to add a class to input text elements, and iterate over those having this class instead of all input tags.

add text input at end of URL

I have a simple HTML page that has a text field, a button, and a div.
I want to have a user input a stock symbol into the field. When they push submit button, an image of a graph will display inside the div.
The graphs already exist #http://ichart.finance.yahoo.com/w?s=
To get a graph for a paticular symbol, I need to add the symbol, an '&', and a large random number. This is a working example
http://ichart.finance.yahoo.com/w?s=YHOO&1234567890
I am not able to make the symbol, the &, and the random number append to the end of the URL. I am also not sure if I am using form correctly.
Here is the code:
function changeChart() {
var rand_no = Math.random();
rand_no = rand_no * 100000000;
var sym = document.myform.symbol.value;
document.getElementById('divService').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="http://ichart.finance.yahoo.com/w?s="' + sym + '"&"' + rand_no + '"><\/object>';
}
<form name = "myform">
<p>
Enter stock symbol
<input id="Text1" type="text" name="symbol"/>
<input type="button" value="Go" name="Submit" onclick="changeChart(this); return false;"/>
</p>
<div id="divService">
<object id="foo" name="foo" type="text/html" data="http://www.aol.com/"></object>
</div>
Here is the complete code, The CSS wouldn't display properly on here.
https://docs.google.com/document/d/1pq39BKxWRqDS162jWss7-fvTbr0r28wq4VFiedh8SCY/edit?hl=en
I checked just some minutes ago and it seems there's no need for &1234567890-like part of URL, so I'd change the code to get this:
function changeChart() {
var sym = document.forms[0].elements['symbol'].value;
var divContent = '<'+'object id="foo" name="foo" type="text/html" data="http://ichart.finance.yahoo.com/w?s=' + sym +'"/>';
document.getElementById('divService').innerHTML = divContent;
}
Given that random number is not necessary, and in HTML code:
<form name = "myform">
<p>
Enter stock symbol
<input id="symbol" type="text" name="symbol"/>
<input type="button" value="Go" name="Submit" onclick="changeChart(); return false;"/>
</p>
<div id="divService">
<object id="foo" name="foo" type="text/html" data="http://www.example.com/"></object>
</div>
</form>
Note that now id has the same value as name for text input, and removed this argument for function call. I hope this helps you. (Update: Tested OK on jsFiddle and here is result)
When you make a random number using Math.random, Javascript returns a double. When you put that random number into the URL, you want it to be a string. Try changing the first line of changeChart to this:
var rand_no = String(Math.random() * 1000000);

Categories

Resources