1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Increase variable increments of one

Discussion in 'HTML & Website Design' started by EscapeartistAZ, Feb 4, 2021.

0
  1. #1
    The idea is to have image that when i click on it it makes the number below it go up by one. I will post a copy of my html and javascript below.

    JAVASCRIPT
    function increasedigit(digitnumber) {
    var x = document.getElementById(digitnumber).innerHTML;
    if (x > 9) {
        x++;
    }
    else
    {
        x == 0;
    }
    document.getElementById.innerHTML = x;
}

HTML
<div class="two">
<img onclick="increasedigit(digitone)" class="arrowgeneral" src="https://image.flaticon.com/icons/png/512/36/36905.png"/>
<p class="digit" id="digitone">0</p>
<img class="arrowgeneral arrowdown" src="https://image.flaticon.com/icons/png/512/36/36905.png"/>
</div>
    Code (JavaScript):

     
    Last edited by a moderator: Feb 8, 2021
    EscapeartistAZ, Feb 4, 2021 IP
  2. EscapeartistAZ

    EscapeartistAZ Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    Okay i got the numbers to work but now my submit button is not working. Ill post the full code. Let me know if you can find out why please.

    <!DOCTYPE html>

<html>
  
<head>
<title>Document</title>
<link rel="stylesheet" href="testcomboonecss.css">
<script>function increasedigit(digitnumber) {
    var x = document.getElementById(digitnumber).innerHTML;
    if (x < 9) {
        x++;
    }
    else
    {
        x = 0;
    }
    document.getElementById(digitnumber).innerHTML = x;
}

function decreasedigit(digitnumber) {
    var x = document.getElementById(digitnumber).innerHTML;
    if (x > 0) {
        x--;
    }
    else
    {
        x = 9;
    }
    document.getElementById(digitnumber).innerHTML = x;
}

function combinecode() {
    var a = document.getElementById(digitone).innerHTML;
    var b = document.getElementById(digittwo).innerHTML;
    var c = document.getElementById(digitthree).innerHTML;
    var d = document.getElementById(digitfour).innerHTML;
    var combo = a.concat(b,c,d);
    document.getElementById(completeanswer).innerHTML = combo;
}</script>
</head>
  
<body>
  
<div id="header">
<img src="https://lh3.googleusercontent.com/proxy/ULxPZwnU3xqXbAdjgv_ho0oQSquIDNC2aQwXMur2RFhbfB8xlsXhxRvKFuN2cMCVrpwyJozr6UJREAxh6Vqy_RH0EFUDR2-XPcRTPu1lEEr2_BmWttydwUyCJZ-L"/>
</div>
  
<div id="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
  
<div id="content">
  
<div class="one">
  
<div class="four">
<p>Enter you answer below then click submit to check if you are correct or not</p>
</div>
  
<div class="two">
<img class="arrowgeneral" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="increasedigit('digitone')"/>
<p class="digit" id="digitone">0</p>
<img class="arrowgeneral arrowdown" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="decreasedigit('digitone')"/>
</div>
  
<div class="two">
<img class="arrowgeneral" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="increasedigit('digittwo')"/>
<p class="digit" id="digittwo">0</p>
<img class="arrowgeneral arrowdown" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="decreasedigit('digittwo')"/>
</div>
  
<div class="two">
<img class="arrowgeneral" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="increasedigit('digitthree')"/>
<p class="digit" id="digitthree">0</p>
<img class="arrowgeneral arrowdown" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="decreasedigit('digitthree')"/>
</div>
  
<div class="two">
<img class="arrowgeneral" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="increasedigit('digitfour')"/>
<p class="digit" id="digitfour">0</p>
<img class="arrowgeneral arrowdown" src="https://image.flaticon.com/icons/png/512/36/36905.png" onclick="decreasedigit('digitfour')"/>
</div>
  
<div class="three">
<img id="submit" src="https://www.freeiconspng.com/uploads/submit-button-png-9.png" onclick="combinecode()"/>
</div>
<p id="completeanswer">hello</p>

</div>
  
</div>

</body>
  
</html>
    HTML:
     
    Last edited by a moderator: Feb 8, 2021
    EscapeartistAZ, Feb 4, 2021 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #3
    There's no form and the image doesn't know it's meant to be a submit button.

    The proper markup should be something like

    <form action="/action_page.php">
  <label for="digit">Digit:</label>
  <input type="text" id="digit" name="digit" value="0"><br>
  <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>
    HTML:
     
    sarahk, Feb 8, 2021 IP
  4. EscapeartistAZ

    EscapeartistAZ Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Using the same method works with my up and down arrows. Its just a <img> with "onclick" on it.
     
    EscapeartistAZ, Feb 9, 2021 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    Yeah, but if you want your form's submit button to submit there needs to be a form.
     
    sarahk, Feb 10, 2021 IP
  6. EscapeartistAZ

    EscapeartistAZ Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Its not really a form and theres not really a submit. the submit button just combines the 4 numbers into one variable. Then i need to create another function that will check if the code is right. If the code is correct it will do something like display text or change the color of something, if the code is wrong then it will either do nothing or pop up incorrect.
     
    EscapeartistAZ, Feb 10, 2021 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #7
    This script
    function combinecode() {
var a = document.getElementById(digitone).innerHTML;
var b = document.getElementById(digittwo).innerHTML;
var c = document.getElementById(digitthree).innerHTML;
var d = document.getElementById(digitfour).innerHTML;
var combo = a.concat(b,c,d);
document.getElementById(completeanswer).innerHTML = combo;
}
    Code (JavaScript):
    should look like this
    function combinecode() {
var a = document.getElementById('digitone').innerHTML;
var b = document.getElementById('digittwo').innerHTML;
var c = document.getElementById('digitthree').innerHTML;
var d = document.getElementById('digitfour').innerHTML;
var combo = a.concat(b,c,d);
document.getElementById('completeanswer').innerHTML = combo;
}
    Code (JavaScript):
     
    sarahk, Feb 10, 2021 IP
  8. EscapeartistAZ

    EscapeartistAZ Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    works perfect now. Thank you!
     
    EscapeartistAZ, Feb 10, 2021 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #9
    take some time to learn what we changed and how to debug scripts using your browser's developer tools.
     
    sarahk, Feb 10, 2021 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Even so I'd make it all be form elements, if for no other reason than to keep it simple... and more automated. You're doing too much "manual" element getting.

    Some advice:

    1) Don't use innerHTML if it can be avoided. It's slow, possibly insecure, and really an outdated/outmoded way of doing things. What you're doing here looks more like a job for textContent. That or use input and output so you can leverage .value instead.

    2) Images are not navigation focusable, and as such are the wrong element to hook for an onclick. Wrap it in a button and strip the formatting off said button.

    3) A single number is NOT a grammatical paragraph. Completely the wrong tag.

    4) Those images that should be buttons? Well, they also are scripting-only functionality, and as such have ZERO business in the markup since scripting off/blocked they would be nonfunctional and/or confusing to the user.

    5) These should probably be input, and your result in an output.

    6) You're page you have that in? Where's your H1? Is that image at the start the actual page header, if so why not H1 text and apply the image from the CSS for accessibility? You don't just slop images into the markup that way.

    For starters, let's clean up the markup.

    
	<section id="combine">
		<fieldset>
			<input type="number" min="0" max="9" maxLength="1" value="0">
			<br>
			<input type="number" min="0" max="9" maxLength="1" value="0">
			<br>
			<input type="number" min="0" max="9" maxLength="1" value="0">
			<br>
			<input type="number" min="0" max="9" maxLength="1" value="0">
		</fieldset>
		
		<div class="submitAndResult">
			<button>Submit</button><br>
			<label>Result: <output>----</output></label>
		<!-- .submitAndResult --></div>

	<!-- #combine --></section>
    Code (markup):
    Note all the nice limitations placed on the input. This would/should allow people to type in values if they like. You could consider limiting keyboard input with scripting too.

    The plus/minus buttons can be generated by the scripting. This shrinks the markup size, means you don't repeat yourself over and over, resulting in an overall easier to work with codebase.

    (function(d) {

	var
		fieldset = d.querySelector("#combine fieldset"),
		fields = fieldset.getElementsByTagName('input'),
		button = d.querySelector("#combine .submitAndResult button"),
		output = d.querySelector("#combine .submitAndResult output");

	function makeDigitControl(content, title, clickHandler, target, after) {
		var result = d.createElement("button");
		result.onclick = clickHandler;
		result.textContent = content;
		result.title = title;
		result.type = "button"; // defaults to "submit", we don't want that.
		fieldset.insertBefore(result, after ? target.nextSibling : target);
	}

	function digitMinus(event) {
		var input = event.currentTarget.nextElementSibling;
		if (--input.value < 0) input.value = 9;
	} // digitMinus

	function digitPlus(event) {
		var input = event.currentTarget.previousElementSibling;
		if (++input.value > 9) input.value = 0;
	} // digitPlus

	for (var input of fields) {
		makeDigitControl("\u25BC", "Decrease Value", digitMinus, input);
		makeDigitControl("\u25B2", "Increase Value", digitPlus, input, true);
	}
	/*
		output.value and input.value default to string
		so we don't need to use the slower concat on +=
	*/
	button.addEventListener('click', function(event) {

		output.value = "";
		for (var input of fields) output.value += input.value;

	}, false);

})(document);
    Code (markup):
    I start out wrapping the scripting in a IIFE so we don't bleed scope into other scripts. I grab all the elements we want to work with into variables so we're not wasting time doing "getElementBy" or "querySelector" inside any loops or events. (they are slow operations).

    Note, the "functional programming" whackjobs will lose their huffing minds screaming "But teh snyde fx"... f*** 'em! They're talking out their backsides!

    makeDigitalControl makes our buttons. Consider it a direct to DOM template. By creating the elements on the DOM we bypass the browser's "parser" making all of this execute many, MANY times faster than innerHTML would.

    make a button, apply our click handler, give it the content text, give it a title, and insert it into the markup next to the input as appropriate.

    Using the onclick Element property is usually as much of a no-no as the derpy garbage onclick attribute. Normally the preferred method is addEventListener so that any other events don't get mangled. Thing is, we literally just created the element, so there are no other handlers so we can sneak right on by.

    digitMinus and digitPlus are able to function without id's, getElements/querySelector, or any of that nonsense becuase they are events. Event.currentTarget is the button you clicked on. Because of how we insert them before and after the input, all we need to do is find the nextElementSibling or previousElementSibling to get it! It's called "walking the DOM" and it greatly simplifies doing this stuff.

    You can also see I greatly simplified the math logic. The prefix operations return their value, so you can just compare and act as appropriate when OOR. (out of range)

    After our functions (I like to list functions first) we go through all the inputs in the fieldset, and create the controls. I used the UTF-8 triangles to keep it simple. If I were to use the chevrons I'd use something like font-awesome instead of multiple static images, as it's less handshaking and they're much better at size scaling.

    Finally I use addEventListener to hook the button. The logic hear for the calculation is nice as it doesn't involve making any extra "variables for nothing", operating directly on the various .value locks us into string behavior by default. Just empty it, then add in the values of each input.

    A nice feature of that being it doesn't matter how many inputs there are, you can add or remove them willy-nilly in the markup, and it will handle it. None of the targets are hardcoded.

    Live demo here tossed into my stock "starting" style:

    https://cutcodedown.com/for_others/EscapeartistAZ/testCombo.html

    The directory:

    https://cutcodedown.com/for_others/EscapeartistAZ/

    Is unlocked for easy access to the gooey bits and pieces, and I tossed a .rar in there so you can grab the whole thing in one go.

    That help any?
     
    deathshadow, Feb 12, 2021 IP
    sarahk likes this.