Less Than 1% of Programmers Can Spot This Bug…
Tags: javascript, programming, html, tutorial
Published: 2022-10-17 14:34:43

Welcome to the first post in this new series, *Can you spot the bug?* Here, you’ll be challenged to find the bug in a code snippet *without* running it.

Ok, I know what you’re thinking, *“this is such a contrived challenge; why would you ever need to debug code without running it?”* 🤔

Well, other than being a fun challenge to see if you’ve got an exceptional eye for the *Where’s Waldo?* of bugs, being able to spot bugs without repeatedly running the code can save you a lot of time.

…*especially* if the bug doesn’t produce obvious error messages. (If you’ve ever had to spend hours debugging a logic bug, you know what I’m talking about!)

# Rules

1. You may not run the code nor look at any error messages produced by the code. 🙈
2. Each code snippet is accompanied by a specific scenario of the code’s unexpected behavior. Your task is to find the bug that causes this behaviour. 🔎
3. If you want to challenge yourself, try not to use Google or refer to documentation! 😱
4. The code will often contain tricky constructs that might mislead you into thinking a certain part is the buggy culprit when it’s actually valid behavior! For the greatest challenge, try limiting yourself to one guess! 🙂

## A Quick Disclaimer

If you aren’t able to spot a bug, it doesn’t mean you’re a bad programmer!

Having an eye for spotting bugs comes with experience: as you work with more and more code, you’ll encounter and become familiar with more and more bugs, including the more obscure ones.

This blog post series is primarily a teaching resource: a resource for you to learn about some of the more nuanced and non-obvious behaviors of common programming languages.

With that said, put on your thinking cap and try to spot the following hidden bug! 🧢

# Translating Text

This is a bug that I encountered a few years ago near the beginning of my journey learning JavaScript. It’s a self-contained HTML file containing some HTML and some JavaScript that tries to translate some text:

```html
<!DOCTYPE html>
<html>
<body>
	<div id='text'>Hello, world!</div>
	<select name="languages">
		<option value="english">English</option>
		<option value="french">French</option>
		<option value="spanish">Spanish</option>
		<option value="python">Python</option>
	</select>
	<button onclick='translate()'>Translate Text</button>
	
	<script>
		function translate() {
			const selectedOption = document.querySelector('select[name="languages"]').value
			text.innerText = {
				english: 'Hello, world!',
				french: 'Bonjour, monde!',
				spanish: '¡Hola, mundo!',
				python: 'print("Hello, world!")'
			}[selectedOption]
		}
	</script>
</body>
</html>
```

This code renders some text in a `div` element. Underneath it, there’s a dropdown that allows you to select a language out of four languages: English, French, Spanish, and Python.

> Yes, Python is a language; I didn’t specify they had to be *spoken* languages 😛

Underneath the dropdown, there’s a *Translate Text* button that when clicked, will call the `translate()` function defined on line 14. The `translate()` function replaces the text in the `div` with the translation of “Hello, world!” in the selected language from the dropdown.

However, if you try running this code in a browser and select a language from the dropdown (other than English), clicking the *Translate Text* button doesn’t seem to do anything, no matter how many times you click it.

There’s a bug in this code. Where do you think it could be? 🧐

---

*For some hints and the full solution, check out the full blog post over at https://dialect.so/blog/can-you-spot-the-bug-1*