So as promised yesterday, I’m going to try this random number exercise again without ChatGPT. In Python I just generate the number and show it in the console, but in JavaScript I want to have a button in the browser to generate it and then also show it in the browser.

Let’s see how far I get!

My Code

Python


<span># Randomly generate a number between 1 and 100 </span>
<span>import</span> <span>random</span>
<span>def</span> <span>main</span><span>():</span>
    <span>print</span><span>(</span><span>random</span><span>.</span><span>randint</span><span>(</span><span>1</span><span>,</span> <span>100</span><span>))</span>
<span>if</span> <span>__name__</span> <span>==</span> <span>'</span><span>__main__</span><span>'</span><span>:</span>
    <span>main</span><span>()</span>
<span># Randomly generate a number between 1 and 100 </span>
<span>import</span> <span>random</span>

<span>def</span> <span>main</span><span>():</span>
    <span>print</span><span>(</span><span>random</span><span>.</span><span>randint</span><span>(</span><span>1</span><span>,</span> <span>100</span><span>))</span>

<span>if</span> <span>__name__</span> <span>==</span> <span>'</span><span>__main__</span><span>'</span><span>:</span>
    <span>main</span><span>()</span>
# Randomly generate a number between 1 and 100 
import random

def main():
    print(random.randint(1, 100))

if __name__ == '__main__':
    main()

Enter fullscreen mode Exit fullscreen mode

Python was super easy for me now. Took me less than a minute. Really the only thing you need to know is random.randint().

JavaScript

Now JS is where it got harder… Below is exactly how far I came without any help until I started struggling. How does that work again with .onclick…? I can’t just use it as a function.


<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>
<span><head></span>
    <span><meta</span> <span>charset=</span><span>"UTF-8"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1.0"</span><span>></span>
    <span><title></span>Random Number Generator<span></title></span>
<span></head></span>
<span><body></span>
    <span><button</span> <span>id=</span><span>"js-button"</span><span>></span>Generate random number<span></button></span>
    <span><div</span> <span>id=</span><span>"js-output"</span><span>></div></span>
    <span><script></span>
        <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'</span><span>js-button</span><span>'</span><span>).</span><span>onclick</span> <span>/* ... </span><span></script></span>
<span></body></span>
<span></html></span>
<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>

<span><head></span>
    <span><meta</span> <span>charset=</span><span>"UTF-8"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1.0"</span><span>></span>
    <span><title></span>Random Number Generator<span></title></span>
<span></head></span>

<span><body></span>
    <span><button</span> <span>id=</span><span>"js-button"</span><span>></span>Generate random number<span></button></span>
    <span><div</span> <span>id=</span><span>"js-output"</span><span>></div></span>

    <span><script></span>
        <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'</span><span>js-button</span><span>'</span><span>).</span><span>onclick</span> <span>/* ... </span><span></script></span>
<span></body></span>

<span></html></span>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
</head>

<body>
    <button id="js-button">Generate random number</button>
    <div id="js-output"></div>

    <script>
        document.getElementById('js-button').onclick /* ... </script>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Alright ChatGPT to the rescue again!


<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>
<span><head></span>
    <span><meta</span> <span>charset=</span><span>"UTF-8"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1.0"</span><span>></span>
    <span><title></span>Random Number Generator<span></title></span>
<span></head></span>
<span><body></span>
    <span><button</span> <span>id=</span><span>"js-button"</span><span>></span>Generate random number <span></button></span>
    <span><div</span> <span>id=</span><span>"js-output"</span><span>></div></span>
    <span><script></span>
        <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'</span><span>js-button</span><span>'</span><span>).</span><span>onclick</span> <span>=</span> <span>function </span><span>()</span> <span>{</span>
            <span>let</span> <span>randomNumber</span> <span>=</span> <span>Math</span><span>.</span><span>floor</span><span>(</span><span>Math</span><span>.</span><span>random</span><span>()</span> <span>*</span> <span>100</span><span>)</span> <span>+</span> <span>1</span><span>;</span>
            <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>"</span><span>js-output</span><span>"</span><span>).</span><span>textContent</span> <span>=</span> <span>randomNumber</span><span>;</span>
        <span>}</span>
    <span></script></span>
<span></body></span>
<span></html></span>
<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>

<span><head></span>
    <span><meta</span> <span>charset=</span><span>"UTF-8"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1.0"</span><span>></span>
    <span><title></span>Random Number Generator<span></title></span>
<span></head></span>

<span><body></span>
    <span><button</span> <span>id=</span><span>"js-button"</span><span>></span>Generate random number <span></button></span>
    <span><div</span> <span>id=</span><span>"js-output"</span><span>></div></span>

    <span><script></span>
        <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>'</span><span>js-button</span><span>'</span><span>).</span><span>onclick</span> <span>=</span> <span>function </span><span>()</span> <span>{</span>
            <span>let</span> <span>randomNumber</span> <span>=</span> <span>Math</span><span>.</span><span>floor</span><span>(</span><span>Math</span><span>.</span><span>random</span><span>()</span> <span>*</span> <span>100</span><span>)</span> <span>+</span> <span>1</span><span>;</span>
            <span>document</span><span>.</span><span>getElementById</span><span>(</span><span>"</span><span>js-output</span><span>"</span><span>).</span><span>textContent</span> <span>=</span> <span>randomNumber</span><span>;</span>
        <span>}</span>
    <span></script></span>
<span></body></span>

<span></html></span>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
</head>

<body>
    <button id="js-button">Generate random number </button>
    <div id="js-output"></div>

    <script>
        document.getElementById('js-button').onclick = function () {
            let randomNumber = Math.floor(Math.random() * 100) + 1;
            document.getElementById("js-output").textContent = randomNumber;
        }
    </script>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Alright it turns out instead of just calling .onclick as a function I just need to somehow use it with = function () {} .
And then the math works with Math.floor(Math.random() * 100) + 1.
And lastly .textContent = randomNumber

Alright if I can remember these three things I think I should be able to do this exercise out of my head and without any help. I’ll try exactly that tomorrow!

原文链接：‍ Daily Code 47 | Random Number 1-100, Python and JavaScript (2)

展开阅读全文

文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END