How do I dynamically change this textfield?

HTML & CSS
1

My textarea field:
<textarea name="testingSummary" cols="20" rows="7" id="exportfield"></textarea>

It is initially set narrow for small screens:

#exportfield { 
width: 15em;
height: 40em;
}

I made a button to change the width for desktop screens:
<input onclick="widenSummaryField()" type="button" value="Wide" class="buttonTimer">

And attached this function to it (it is in the form of id, “formTesting”):

function widenSummaryField() {
    "use strict";
var formTesting = document.getElementById('formTesting'); 
    formTesting.exportfield.width = "30em";
}

But clicking the button doesn’t update the textarea from 15em to 30em. Why not? There’s no response in the console.

2

I got the answer!

formTesting.exportfield.style = "width:25em";

3

Hi there WebSteve,

Why do you need javascript and a button to change the width?

Something like this…

#exportfield {
    display: block; 
    width:100%;
    max-width: 30em;
    margin: auto;
    box-sizing: border-box;
}

…would make the textarea element pleasantly responsive. :winky:

coothead

1 Like
4

I see the first few textarea boxes are all different widths when viewed on my smartphone (under “Basic Information” and “Results”). Once I added cols=“35” to every textbox, then there was consistency. Of course, it doesn’t go wider for wider screens.

With cols=“35” :
http://www.reedyrace.com/ae/runtime/testing10.html

Without cols=“35”:
http://www.reedyrace.com/ae/runtime/testing11.html

Did I integrate your code properly? (The buttons don’t quite work; they point to an earlier code.)

// textarea
#exportfield, #output, .size80 {    
    display: block; 
    width:100%; max-width: 70em;
    box-sizing: border-box; 
    border: 1px solid #ccc;
    padding: 5px; margin: auto;
    overflow: auto;
    border-radius: 8px;
    line-height: 1.4;
}

#exportfield { height: 40em; }
#output { height: 40em; }
.size80 { height: 7em;}

@media screen and (max-width:720px) {
/* Tiny Styles */
    #exportfield, #output, .size80 {max-width: 300px;}
    .size80 {height: 5em; max-width: 300px}
    #exportfield, #output {height: 25em;}
}

Thank you for your kind assistance!

5

Your css is invalid:

See if you can work out why this doesn’t work.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
// body styles 
body {
 background:red;
}
</style>
</head>

<body>
<p>Why is the background not red?</p>
</body>
</html>

/* These are css comments */

When you fix that them some styles will start to work.

Note that flex:grow:0 will stop the element stretching to full width so 100% of no width doesn’t get applied. You would need flex-grow:1 on your .rowflleft and rowflright (assuming I have understood what you were trying to achieve but you seem to be applying that style to header and load data buttons which are a different format so you will need to style those differently).

Note that breaks are used for line breaks and not for making space.

This is semantically very bad.

 <br>
        It's important to start with the base or standard setup in the manual so you have a point of reference for testing against. <br>
        <br>

It’s a paragraph so use the p element and not a break.

Control extra spacing with margin on the p element and not adding extra breaks. Breaks are used for line breaks as you would have in addresses or lines in a poem or song but never just for making space.

I don’t see why you are using display:grid on .parent as it doesn’t seem to be used anywhere and is just a wasted element unless you have further plans for it.

I haven’t looked into any other issues as these need to be fixed first and of course the following may upset the js as I have removed all the parent divs as they did nothing :slight_smile:

This is just a start for visual appearance.

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Setup Testing</title>

<!-- Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Setup Testing">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="128x128" href="http://www.reedyrace.com/ae/icon_128.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://www.reedyrace.com/ae/icon_32.png">
<link rel="icon" type="image/png" sizes="48x48" href="http://www.reedyrace.com/ae/icon_48.png">
<link rel="icon" type="image/png" sizes="192x192" href="http://www.reedyrace.com/ae/icon_192.png">
<link rel="icon" type="image/png" sizes="256x256" href="http://www.reedyrace.com/ae/icon_256.png">
<link rel="icon" type="image/png" sizes="512x512" href="http://www.reedyrace.com/ae/icon_512.png">
<link rel="stylesheet" href="css/setuptesting6.css">
<script src="javascripts//localStorageTesting.js"></script>
<script src="javascripts//lapCounter.js"></script>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.fontstack {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
}
html {
	background-color: #fff;
}
.container {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-right: .5em;
	max-width: 600px;
}
h4 {
	font-size: 1.2em;
	padding: 0;
	margin: .5em 0;
}
.rowgr {
	display: flex;
	flex-direction: row;
	width: 100%;
	border: 0;
	padding: .2em .2em;
}
/* padding at bottom of rows */
.pad1 {
	margin-bottom: .3em;
}
.pad2 {
	margin-bottom: 1em;
}
/* two columns of the row */
.rowflleft {
	flex-grow: 1;
}
.rowflright {
	flex-grow: 1;
	align-items: left;
}
.buttons-left {
	flex-grow: 0;
}
.cen {
	display: table;
	margin: auto;
	text-align: center;
}
.extrapad {
	padding: .5em 0;
}
/* date field */
.singleline {
	height: 30px;
	padding: 0 1em;
}
label {
	display: block;
}
/* lap counter */
#clock {
	font-size: 1.5em;
	text-align: center;
	height: 30px;
}
input[type="button"] {
	border: 0;
	font-size: 1em;
	border: #ccc solid 1px;
	border-radius: 8px;
	padding: .2em;
	height: 30px;
	float: left;
	color: #000;
	margin: .3em;
	/*   -webkit-appearance:normal; */
}
#exportfield, #output, .size80 {
	display: block;
	width: 100%;
	max-width: 70em;
	box-sizing: border-box;
	border: 1px solid #ccc;
	padding: 5px;
	margin: auto 0;
	overflow: auto;
	border-radius: 8px;
	line-height: 1.4;
}
#exportfield {
	height: 40em;
}
#output {
	height: 40em;
}
.size80 {
	height: 7em;
}
@media screen and (max-width:720px) {
	/* Tiny Styles */
	#exportfield, #output, .size80 {
		/*max-width: 300px;*/
	}
	.size80 {
		height: 5em;
		/*max-width: 300px*/
	}
	#exportfield, #output {
		height: 25em;
	}
}
input[type="button"] {
	width: 7em;
}
#startstopbutton, #resetbutton {
	width: 7em;
}
#splitbutton {
	width: 3em;
}
input[type="text"] {
	-webkit-border-radius: 8px;
	background-color: #eee;
	border: #ccc solid 1px;
	padding: 0;
	height: 30px;
	-webkit-appearance: none;
}
.buttonSetup {
	width: 7em;
}
.grayed {
	background-color: #eee;
}
input[type="button"], .buttonTimer, #startstopbutton, #resetbutton, #splitbutton {
	background-color: #ddd;
}
input[type="button"]:hover {
	background-color: #A9D0F5;
	color: black;
}
.buttonSetup:active {
	color: red;
}
.buttonTimer {
	text-align: center;
	width: 7em;
	height: 30px;
}
#clock {
	height: 30px;
	font-size: 1.4em;
	background-color: #F5F6CE;
}
</style>
</head>

<body>
<!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->
<div id="top" class="container">
  <div class="rowgr pad1">
    <div class="rowflleft">
      <input onclick="returnToHome()" type="button" value="Home" class="buttonSetup">
    </div>
    <div class="rowflright cen fontstack">
      <h4>Setup Testing</h4>
    </div>
  </div>
  <div class="rowgr pad2">
    <div class="rowflright cen fontstack"> Carefully document your setup changes here.
      Data will persist only in this browser. </div>
  </div>
  <div class="rowgr pad1 grayed">
    <div class="rowflleft buttons-left">
      <input onclick="help()" type="button" value="Help" class="buttonSetup">
      <br>
      <input id="loadData" onclick="loadDataTesting()" type="button" value="Load Data" class="buttonSetup">
    </div>
    <div class="rowflright cen fontstack">
      <h4>Basic Information</h4>
    </div>
  </div>
  <form name="formTesting" id="formTesting">
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingDate">Date of Testing</label>
        <br>
        <input type="text" name="testingDate" id="testingDate" placeholder=" 30 characters" class="singleline" onchange="persistDataTesting()">
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingConditions">Track Conditions During Testing</label>
        <br>
        <textarea name="testingConditions" id="testingConditions" cols="35" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingLapTimesPrior">Lap Times Prior to Testing (use lap counter below)</label>
        <br>
        <textarea name="testingLapTimesPrior" id="testingLapTimesPrior" cols="35" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingSetup">Setup Sheet This Applies To</label>
        <br>
        <textarea name="testingSetup" id="testingSetup" cols="35" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingSetting">The Setting That's Being Tested</label>
        <br>
        <textarea name="testingSetting" id="testingSetting" cols="35" placeholder=" (Ex.: fr camber)" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad2">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingNotes">Other Information or Modifications</label>
        <br>
        <textarea name="testingNotes" id="testingNotes" cols="35" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad1 grayed">
      <div class="rowflleft">
        <input onclick="returnToTop()" type="button" value="Top" class="buttonSetup">
      </div>
      <div class="rowflleft cen fontstack" style="padding: .5em;">
        <h4>Results</h4>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingResults">Setting Adjustment + Lap Time Record</label>
        <br>
        <textarea name="testingResults" id="testingResults" cols="35" placeholder="(Ex.: -.5 deg = 1:39.18.&nbsp;&nbsp;&nbsp;-1 deg = 1:25.09)" class="size80" onchange="persistDataTesting()">
                        </textarea>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft fontstack" style="padding: .5em;">
        <label for="testingConclusions">Conclusions</label>
        <br>
        <textarea name="testingConclusions" id="testingConclusions" cols="35" placeholder="(Ex.: -1 gave better lap times)" class="size80" onchange="persistDataTesting()">
                </textarea>
      </div>
    </div>
    <div class="rowgr pad2 fontstack">
      <input onclick="exportData()" type="button" value="Export" class="buttonSetup">
      &nbsp;&nbsp;
      <input onclick="clearDataTesting()" type="button" value="Clear All" class="buttonSetup">
    </div>
    
    <!-- Lap Counter -->
    
    <div class="rowgr pad1 grayed">
      <div class="rowflleft">
        <input onclick="returnToTop()" type="button" value="Top" class="buttonSetup">
      </div>
      <div class="rowflright cen fontstack">
        <h4>Lap Counter</h4>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowfleft fontstack"> (Smartphones: You may tap inside the lap counter field and type more notes about the race. Hold finger down over the field to select all, copy, then paste it into your email app.) </div>
    </div>
    <div class="rowgr pad1 fontstack">
      <input id="startstopbutton" type="button" value="Start/Stop" onClick="startstop();" class="buttonSetup">
      &nbsp;
      <input id="splitbutton" type="button" value="Lap" onClick="splittime();">
    </div>
    <div class="rowgr pad2 cen fontstack">
      <input id="clock" type="text" value="00:00:0" readonly class="buttonTimer">
      &nbsp;
      <input id="resetbutton" type="button" value="Reset/Erase" onClick="resetclock();" class="buttonSetup">
    </div>
    <div class="rowgr pad2 cen fontstack">
      <textarea id="output" cols="35" class="summaries"></textarea>
    </div>
    
    <!-- Export -->
    
    <div class="rowgr pad1 grayed">
      <div class="rowflleft">
        <input onclick="returnToTop()" type="button" value="Top" class="buttonSetup">
      </div>
      <div class="rowflright cen fontstack">
        <h4>Export Data</h4>
      </div>
    </div>
    <div class="rowgr pad1">
      <div class="rowflleft">
        <input onclick="loadDataSummary()" type="button" value="Load Data" class="buttonTimer">
      </div>
      <div class="rowflright fontstack"> (Smartphones: Hold finger down over the field to select all, copy, then paste it into your email app.) </div>
    </div>
    <div class="rowgr pad1 cen fontstack">
      <textarea name="testingSummary" cols="35" id="exportfield"></textarea>
    </div>
    <div class="rowgr pad2 fontstack">
      <input id="email" type="button" value="Open Email" onClick="openEmail();" class="buttonTimer">
      &nbsp;&nbsp;
      <input onclick="clearSummary()" type="button" value="Clear This" class="buttonSetup">
    </div>
  </form>
  
  <!-- Getting the Best Setup -->
  
  <div id="bestSetup" class="rowgr pad1 grayed">
    <div class="rowflleft">
      <input onclick="returnToTop()" type="button" value="Top" class="buttonSetup">
    </div>
    <div class="rowflright cen fontstack" style="padding: .5em;">
      <h4>Getting the Best Setup</h4>
    </div>
  </div>
  <div class="rowgr pad2">
    <div class="rowflright fontstack" style="padding: .5em;">
      <p>Before you change any of your settings, make sure you can get around the track without crashing. None of your setup changes will work if you cannot stay on the track. Practice, practice, and more practice, not new parts or settings, is critical at this point. Don't be the golfer who keeps blaming his clubs!</p>
      <p>It's important to start with the base or standard setup in the manual so you have a point of reference for testing against.</p>
      <p>After you stop your vehicle's love affair with the boards, your goal is to get consistent lap times, not to go fast! Your lap times may be inconsistent because of poor control. So get a lap-counter buddy to time your laps until they are consistent. Keep notes of your lap times on the same layout so you can check your progress. Your mobile device already includes a stopwatch in the Clock app -- use it! You can enter your lap times in the field provided. Or use the lap counter at the bottom of the page.</p>
      <p>After your lap times are consistent, it's time to make changes to the vehicle. It's important to get your tire type right before making smaller changes to the vehicle. One tire type does not fit all track conditions, so what are the winning racers using at your track? Change your tires if necessary, then practice some more, checking your lap times again. Are your lap times the same, better, or worse? If better, then you have either become a better driver or your new tires have made an improvement.</p>
      <p>With good tires installed, you can now make other changes to your setup based on the problems you are encountering on the track. (The RC Cheat Sheets app can help you with this.) Make just one setting change at a time, and time it. Note the positive and negative results of each change, along with its lap time. In the results box, note your conclusions (answering the question, "I made this change because..."), and note your recommended setting change.</p>
      <p>No change will work for every part of the track. For instance, you can gain faster time in the straightaway, but it may slow you down too much in the turns. So think about what change will do the most good in the area that is slowing down the overall lap times.</p>
      <p>It's important to carefully note the track conditions. A successful setup for a dry track won't work on a damp or wet track, nor will the perfect bumpy-track setup work on a blue-groove layout. Track conditions can change throughout the day.</p>
      <p>This page was designed to help you methodically record each change to your vehicle on the way to a winning setup. It will help you to think critically about your setups and force you to justify changes you made. You can use the large Conclusions field to keep a record of past session conclusions. If connection permits, you can export each testing session to keep a record of what was already tested.</p>
      <p>For best results, read the manuals for your electrical components and understand their settings, and test their options, too. The more you understand the many vehicle and equipment setting options, the finer the tuning changes you can make, and the more pleasure you'll get out of racing -- and winning! -- your vehicle.</p>
    </div>
  </div>
  <div class="rowgr pad1 grayed">
    <div class="rowflleft">
      <input onclick="returnToTop()" type="button" value="Top" class="buttonSetup">
    </div>
  </div>
</div>
<!-- container --> 

<script> 
function returnToHome() {
    window.location=("../rc8b3tune/apps.html");
}
</script> 
<script> 
function help() {
    window.location=("setuptesting.html#bestSetup");
}
</script> 
<script> 
function exportData() {
    window.location=("setuptesting.html#exportData");
}
</script> 
<script> 
function returnToTop() {
    window.location=("setuptesting.html#top");
}
</script> 
<script> 
function openEmail() {
    window.location.href = "mailto:";
}
</script> 
<script>
loadDataTesting();

</script> 

<!-- Initialize JS Plugins
  <script src="javascripts/app.js"></script> -->
</body>
</html>
6 
background:red;

This will work if background-color:red;

“I don’t see why you are using display:grid on .parent” Actually I did use the grid, but then I split everything apart as separate flexboxes instead. Forgot about removing the .parent. Thanks!

I’ll take care of all the <br>s and do it right!

I’ll peek at your solution after I’ve done all my homework on my page first.

Very much appreciated!

Edit: all is working nicely! http://www.reedyrace.com/ae/runtime/testing13.html

1 Like
7

No it won’t work with that either. :slight_smile:
The problem was that you were using
JS comments in a css file instead of css comments.

This will confuse the parser and it will look for an element called:

// some text body {background:red}

Thus the whole rule fails.

2 Likes
8

You mean the // line should have been wrapped in < !-- → ?

9

Lol no they are html comments :slight_smile:

You must use css comments as I showed in my previous post.

/* css comment */

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.