For loop opening urls - javascript

I am using a for loop to open several urls, however it only opens the first item in the array. I have tried with a for ( i in array) but it came up with the same result.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function launchproducts (form) {
var input_from_user = form.inputbox.value;
var product_numbers;
product_numbers = input_from_user.split(";",100000);
for ( var i = 0; i < product_numbers.length; i++) {
launch_code = "http://www.youtube.com/results?search_query=" + product_numbers[i];
window.open(launch_code, '_blank');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter product numbers: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="launchproducts(this.form)">
</FORM>
</BODY>
</HTML>

Try this :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function launchproducts (form) {
var input_from_user = form.inputbox.value;
var product_numbers;
product_numbers = input_from_user.split(";",100000);
for ( var i = 0; i < product_numbers.length; i++) {
var launch_code = "http://www.youtube.com/results?search_query=" + product_numbers[i];
var go = confirm("Launch next ? (" + product_numbers[i] + ")");
if (go) {
window.open(launch_code, '_blank');
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter product numbers: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="launchproducts(this.form)">
</FORM>
</BODY>
</HTML>

Related

Sorting several names with the `sort()` method in JS

I have 2 buttons, the first is named btnClient and the following is btnSort. When, I enter 3 names, I would like to sort alphabetically.
I have to use the method sort()but it doesn't work.
In HTML
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
In JS
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
My btnSort button has a problem, nothing happening, even by clicking on button btnSort.
var arrayClient = new Array();
var buttonClient = document.getElementById('btnClient');
var buttonDisplay = document.getElementById('btnSort');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient(){
var i = 0;
arrayClient[i] = document.getElementById('nameClient');
i = i + 1;
document.getElementById('nameClient').value = ' ';
}
function display()
{
arrayClient.sort();
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body >
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>
Use push method to add values to your array after clicking the bntClient button,
After clicking on sort you will see these values being sorted and displayed in the console.
Your second input is meaningless.
const arrayClient = []
const buttonClient = document.getElementById('btnClient');
const buttonDisplay = document.getElementById('btnSort');
const firstInput = document.getElementById('nameClient');
buttonClient.addEventListener('click', addClient);
buttonDisplay.addEventListener('click', display);
function addClient() {
arrayClient.push(firstInput.value.trim());
firstInput.value = '';
}
function display() {
arrayClient.sort();
console.log(arrayClient);
}
<html>
<head>
<script src="Thing.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
<body>
<h1>Exercise 13</h1>
<input type="text" id="nameClient" size="30" />
<button id='btnClient'>Save client</button>
<input type="text" id="listSort" size="30" />
<button id='btnSort'>List sort</button>
<script src="script.js"></script>
</body>
</html>

Form html google scrip

Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>

How to add images that were searched to an array then present them one by one in a slideshow?

I am looking to add images to an array by appending the outputted images based on what was searched. Before I implemented the array code, all of the photos would appear on the page, 15 or so. I hope to add them to an array and them show one at a time by adding a side. That is what I am trying to accomplish now.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="imageSearch.css">
</head>
<body>
<form class="form-inline" id="myForm" action="" method="post">
<div class="form-group">
<input type="text" class="form-control " id="item" name="imageSearch" placeholder="Search for an Image">
</div> <br> <br>
<input class="btn btn-default" type="submit" value="Submit"> <input class="btn btn-default" id="clear" type="button" value="Clear"> <br>
</form>
<div id="output"></div>
<script>
$('#myForm').on('submit', function(e){
e.preventDefault();
search();
return false;
});
function search() {
var images = new Array();
var apiKey = '';
$.ajax(
{
type:'GET',
url:"https://api.gettyimages.com/v3/search/images/creative?phrase=" + $('#item').val(),
beforeSend: function (request)
{
request.setRequestHeader("Api-Key", apiKey);
}})
.done(function(data){
console.log("Success with data")
for(var i = 0;i<data.images.length;i++)
{
images[i].src = " <img src='" + data.images[i].display_sizes[0].uri + "'/>" ;
$("#output").append(images[i]);
}
})
function nextImage(output)
{
var img = document.getElementById("output");
for(var i = 0; i < images.length;i++)
{
if(images[i].src == img.src) // << check this
{
if(i === images.length){
document.getElementById("output").src = images[0].src;
break;
}
document.getElementById("output").src = images[i+1].src;
break;
}
}
}
.fail(function(data){
alert(JSON.stringify(data,2))
});
return false;
}
</script>
<script type="text/javascript">
$("#clear").click(function()
{
$("#output").empty();
});
</script>
</body>
</html>

Auto calculation using javascript

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var form = document.forms.myform,
qty = form.qty,
cost = form.cost,
output = form.textbox;
window.calculate = function () {
var q = parseInt(qty.value, 10) || 0,
c = parseFloat(cost.value) || 0;
output.value = (q * c).toFixed(2);
};
</script>
</head>
<body>
<form action="caltest.php" method="post" name="myform" onkeyup="calculate()">
<label>Num of PAX :</label>
<input type="text" name="qty" />
<input type="hidden" name="cost" value="700" />
<br/>
<lable>Total Price: </lable>
<input type="text" name="textbox" />
</form>
</body>
</html>
I am doing a simple calculation.Not getting any output.
When var form = document.forms.myform is executed, there is no <form name="myform" ...yet.
The simplest (though maybe not the most sophisticated) solution is to move the <script> block from <head> to after the form code.
Try this one is working
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="caltest.php" method="post" name="myform" onkeyup="calculate()" >
<label>Num of PAX :</label>
<input type="text" name="qty" />
<input type="hidden" name="cost" value="700" />
<br/>
<lable>Total Price: </lable>
<input type="text" name="textbox" />
</form>
<script>
var form = document.forms.myform,
qty = form.qty,
cost = form.cost,
output = form.textbox;
window.calculate = function () {
var q = parseInt(qty.value, 10) || 0,
c = parseFloat(cost.value) || 0;
output.value = (q * c).toFixed(2);
};
</script>
</body>
</html>

Clear the output area

I have here a working code that lets the user input something and it displays the output right away, but I want to create a function triggered by a button that would clear the output area itself. Is this possible with my code?
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>
</html>
Try this,
Javascript:
function Clean(){
document.getElementById('display').innerHTML='';
}
HTML:
<input type="button" value="Clean" onClick="Clean()"/>
Do this:
Notes:
-I have closed the P element.
-A new button was added "Clean" and you can use JQuery as it is shown below to clean the output (remember to have JQuery referenced in your page).
<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input" />
<input type="button" value="GO" onClick="press(input.value)"/>
<input type="button" value="Clean" onClick="$('#display').html('');"/>
<p id = "display"></p>
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>

Categories

Resources